前言：如何搭建一個Vue項目
1、安裝npm vue服務
1、安裝vue-cli：
npm install -g @vue/cli
2、如果安裝失敗，檢測網絡，清理npm緩存:
npm chche clean --force
3、檢查版本：
vue -V
4、進入到項目根目錄：
cd C:\Install Path\Vue\Vue_Study_One
5、建立新項目：
vue create vue_project
1.選擇 Manually select features (使用數字"1,2"的方式選擇)
2.選擇項目需要安裝的屬性(使用“空格鍵”選擇)
Check the features needed for your project:
(*) Babel
(*) Router
(*) Vuex
(*) Linter / Formatter
3.Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 輸入"Y"
4.Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only 選擇這個(預設第一個)
5.Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save 選擇這個(預設第一個)
6. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
> In package.json 選擇這個(預設第二個)
7.Save this as a preset for future projects? (y/N) 輸入"N"
8.接下來就進入建立項目的過程~~~
6、進入到新項目：
cd vue_project
7、執行編譯：
npm run build
8、啟動項目：
npm run serve
2、新項目建立成功後，使用pycharm打開，目錄結構如下：
main.js 入口的JS檔案
router.js 做路由配置的配置檔案
store.js 狀态管理器的配置檔案
3、編輯配置檔案vue.config.js，并打包
// 配置項目啟動的端口号
module.exports = {
baseUrl: "./",
devServer: {
port: 8888,
}
}
3.1、打包指令 npm run build
3.2、打包後生成dist目錄，裡面的檔案就是釋出用到的檔案。
3.3、打包完畢後，使用 npm run serve 重新開機項目，使用 http://localhost:8888/ 端口重新登入頁面。
4、主要檔案介紹
/public/index.html 這個檔案是通路 http://localhost:8888/ 看到的頁面
/src/views/main.js 這個檔案是Vue視圖的入口檔案
/src/views/App.vue 這個檔案是Vue的根元件
一、Vue架構内元件的使用
這裡用"父元件内應用子元件"舉例
1.1、在/src/components/目錄下建立一個NavBar.vue檔案 (1、建立子元件)
<template> <!-- 模闆 -->
<!-- 1、建立一個元件 -->
<div id="nav-bar">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
</template>
<script>
// export default {}與script标簽綁定出現
export default {
// 導出該元件的資料，方法，計算，監聽，生命周期鈎子等
name: "NavBar"
}
</script>
<style scoped>
/*保證樣式隻适用于元件内部，否則整個頁面都會使用*/
</style>
1.2、在/src/App.vue檔案内，引用子元件 (2、導入子元件 3、注冊子元件 4、使用子元件)
<template>
<div id="app">
<!-- 4、使用子元件 -->
<NavBar></NavBar> <!-- 這個是應用的子元件 -->
<router-view/>
</div>
</template>
<!-- 父元件内引用子元件 -->
<script>
// 2、導入子元件
import NavBar from './components/NavBar.vue'
export default {
// 3、注冊子元件
components: {
NavBar // 原格式為："Nav": Nav
}
}
</script>
二、路由控制器router
2.1、router.js檔案内名稱及用途介紹
path： 定義URL的通路路徑
1.path: '/one-view' 一級路由：在跟元件中被渲染，替換跟元件的<router-view/>标簽
2.path: '/one-view/one-detail', 二級路由:在根元件中被渲染，替換根元件的<router-view/>标簽
name： 定義别名
1.name: 'one', 定義别名name的值為 "one"
component: () => import('./views/OneView.vue')： 指定URL通路路徑對應的通路檔案(這裡寫絕對路徑)
redirect：路由重定向
1.redirect: '/home' 重定向到'/home'
children: [{}]： 子路由(使用方式如下：)
children: [{
path: "show",
component: () => import('./components/OneShow.vue'),
}]
2.2、在App.vue元件内，router的用法
1.click事件的應用
<template>
<div id="one-view">
<div class="one-detail" @click="detail">詳情</div>
</div>
</template>
<script>
export default {
methods: {
// 完成router的邏輯轉跳(觸發@click="detail"時)，轉到"/one-view/one-detail"這個頁面
detail () {
this.$router.push("/one-view/one-detail"); // URL指向
}
}
}
</script>
2.<router-link></router-link> 的應用
<template>
<div id="nav-bar">
<!-- router-link在頁面上會被渲染成a标簽 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>|
<router-link :to="{name: 'one'}">OneView</router-link>|
<!-- 這裡還可以使用v-bind綁定屬性"to"的方式,起一個别名(name: 'one'),那麼就會去router.js檔案中找(name: 'one')的值 -->
</div>
</template>
3.<router-view/>的應用 (子路由的應用)
1、在router.js檔案中定義子路由
{
// 二級路由:在根元件中被渲染，替換根元件的<router-view/>标簽
path: '/one-view/one-detail',
component: () => import('./views/OneDetail.vue'),
// 子路由(可以有多個子路由)：在所屬路由指向的元件中被渲染，替換該元件的<router-view/>标簽
children: [{
path: "show",
component: () => import('./components/OneShow.vue'),
}]
},
2、在子路由的上一級路由(二級路由)指向的檔案OneDetail.vue中，定義如下：
<template>
<div id="one-detail">
<div @click="back">傳回</div>
<div @click="show">顯示</div>
<div class="box">
<!-- 會被替換為該路由下的子路由指向的元件 -->
<router-view/>
</div>
</div>
</template>
<script>
export default {
methods: {
back () {
// $router采用history方式傳回上一級
this.$router.go(-1)
},
show () {
// $router的邏輯跳轉路徑
this.$router.push('/one-view/one-detail/show')
}
}
}
</script>
三、狀态控制器store.js
3.1、修改與擷取狀态控制器store.js中的某個狀态值(state内的狀态值)
// 狀态管理器
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 在任何一個元件中，均可以通過this.$store.state.msg通路msg的資料
// state永遠隻能擁有一種狀态值
state: {
msg: "狀态管理器" // msg用來存值
},
// 讓state擁有多個狀态值
mutations: {
// 在任何一個元件中，均可以通過this.$store.commit("事件名: setMsg","修改的内容")來修改state中的msg的值
setMsg(state, new_msg) { // mutations會對state進行一次封裝，那麼在setMsg裡面就需要接受"state",new_msg表示接受傳入的值
state.msg = new_msg
}
},
// 讓mutations擁有多個狀态值
actions: {
}
})
在router.js檔案中定義路由
{
path: "/two-view",
component: () => import('./views/TwoView.vue'),
},
在TwoView.vue裡面：定義 "擷取和修改狀态控制器的代碼"
<template>
<div id="two-view">
<h1>two-view</h1>
{{msg}}
<div>
<button @click="getMsg">擷取狀态中的值</button>
</div>
<div>
<input type="text" v-model="info">
</div>
<div>
<button @click="setMsg">修改狀态中的值</button>
</div>
<!--<router-link to="/two-view/two-detail">詳情頁面</router-link>-->
</div>
</template>
<script>
export default {
data() {
return {
msg: "two-view",
info: "",
}
},
methods: {
// 從狀态管理器(store.js)中拿到msg的資料
getMsg() {
this.msg = this.$store.state.msg
},
setMsg() {
this.$store.commit("setMsg", this.info)
}
}
}
</script>
<style scoped>
</style>
四、vue選擇器
<template>
<div id="two-detail">
<div @click="divClick" :class="{active: isAble}" ref="div_box">vue選擇器</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: "",
isAble: false,
}
},
methods: {
divClick() {
this.isAble = !this.isAble;
// 在vue邏輯中，通過$refs可以擷取頁面便簽(vue的選擇器)
let div = this.$refs.div_box;
div.style.height = "200px"
}
}
}
</script>
<style scoped>
.active {
background-color: orange;
}
</style>
六、Vue動畫 -- transition标簽結合v-show|v-if條件指令完成動畫
1、在NavBar.vue檔案中加入：<router-link to="/three-view">ThreeView</router-link>|
2、在router.js檔案中加入路由：{path: "/three-view",component: () => import('./views/ThreeView.vue'),},
3、建立ThreeView.vue檔案，編輯代碼：
<template>
<div id="three-view">
<div class="box">
<ThreeBox v-for="(v,i) in box_list" :key="i" :val="v"></ThreeBox>
</div>
<div>
<button @click="isShow = !isShow">切換</button>
<!-- transition标簽結合v-show|v-if條件指令完成動畫 -->
<!-- 将要做動畫的标簽用transition标簽嵌套 -->
<transition name="p_show">
<p v-show="isShow">P标簽</p>
</transition>
</div>
</div>
</template>
<script>
import ThreeBox from '../components/ThreeBox.vue'
export default {
data () {
return {
isShow: false,
box_list: [
{
title: "蘋果",
info:"美國公司",
},
{
title: "華為",
info:"中國公司",
},
{
title: "諾基亞",
info:"諾基亞",
},
{
title: "蘋果",
info:"美國公司",
},
{
title: "華為",
info:"中國公司",
},
{
title: "諾基亞",
info:"諾基亞",
},
],
}
},
components: {
ThreeBox,
},
name: "ThreeView",
methods: {
}
}
</script>
<style scoped>
#three-view {
width: 100%;
height: 500px;
background-color: pink;
}
.box:after {
content: '';
display: block;
clear: both;
}
p {
background-color: orange;
}
/* 此動畫針對于顯隐切換 */
.p_show-enter-active,
.p_show-leave-active {
transition: all 1s ease;
}
.p_show-enter,
.p_show-leave-active {
opacity: 0;
}
</style>
4、在components目錄下建立ThreeBox.vue檔案，編輯代碼：
<template>
<div id="three-box" :class="{move: isMove}" @mouseover="moving" @mouseout="moved">
<h3>{{val.title}}</h3>
<p>{{val.info}}</p>
</div>
</template>
<script>
export default {
props: ['val'],
data() {
return {
isMove: false
}
},
methods: {
moving () {
this.isMove = true;
},
moved () {
this.isMove = false;
},
}
}
</script>
<style scoped>
#three-box {
width: 120px;
height: 200px;
border: 3px solid red;
float: left;
transition: .3s;
}
.move {
transform: translateY(-10px);
}
</style>
Vue動畫實作效果：
七、Vue插槽
1、編輯FourView.vue
<template>
<div id="four-view">
<FourBox>
<!-- 子元件隻是需要渲染父元件的内容，可以通過插槽實作資料的傳遞 -->
<!-- 父元件寫在子元件标簽内部，用全局屬性slot與子元件内部插槽name屬性一一對應 -->
<div slot="st" @click="divClick">
<span>{{msg}}</span>
<span>{{msg}}</span>
</div>
</FourBox>
</div>
</template>
<script>
import FourBox from '../components/FourBox.vue'
export default {
data () {
return {
msg: "four 資訊"
}
},
components: {
FourBox
},
methods: {
divClick() {
this.msg = "插槽資訊"
}
},
}
</script>
<style scoped>
</style>
2、編輯FourBox.vue
<template>
<div id="four-box">
<slot name="st">插槽</slot>
</div>
</template>
<script>
export default {
name: "FourBox"
}
</script>
<style scoped>
</style>