我們看到如上界面以后，選擇 Babel Router Vuex CSS Pre-processors （使用空格鍵選中） 進(jìn)行下一步

Vue CLI v3.1.3
┌───────────────────────────┐
│  Update available: 3.2.1  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: MyTest

接下來(lái)大家按照如上配置，基本可以完成項(xiàng)目搭建。等待安裝完畢后執(zhí)行

cd helloworld
npm run serve

進(jìn)入瀏覽器 打開(kāi) localhost:8080 如果看到Vue的歡迎界面，恭喜你，我們已經(jīng)邁出成功第一步了

在Vue-cli3 中 為大家提供了圖形化配置界面 執(zhí)行

vue ui 

會(huì)開(kāi)到提示在 localhost:8000打開(kāi)了UI配置界面，由于個(gè)人感覺(jué)圖形化配置還是不靈活的，這里就先不給大家做太多演示了，要想做好一個(gè)VUE項(xiàng)目，需要做太多的搭配，我這里會(huì)配置一套基本可以使用的VUE框架放到個(gè)人github供大家使用。

我們使用VUE一般是用來(lái)開(kāi)發(fā)單頁(yè)程序，那么在單頁(yè)程序內(nèi)的跳轉(zhuǎn)就要用到路由的形式，由于這里課程是要帶大家快速熟悉VUE并且使用VUE，所以原理這里暫且跳過(guò)，直接告訴大家使用方法。
我們?cè)陂_(kāi)始選擇框架要用到的東西的時(shí)候已經(jīng)選擇了Vue-Router,這里我們直接上代碼使用即可。我們這里就搭配著Vue-Cli3的腳手架來(lái)講解，這里順便為大家講解一下Vue-cli3腳手架為我們創(chuàng)建的目錄結(jié)構(gòu)

│ .gitignore git屏蔽提交文件
│ babel.config.js 自定義babel的地方
│ package.json 你的所有依賴啥的
│ README.md 不介紹
│ yarn.lock yarn 如果你是 npm 就是 package-lock.json
│
├─public 通過(guò)執(zhí)行 npm run build 產(chǎn)生
│ favicon.ico
│ index.html
│
└─src 主要我們要修改的地方

│  App.vue          App主組件
│  main.js          入口JS
│  router.js        路由文件
│  store.js         vueX store 文件
│  
├─assets            靜態(tài)文件存放處
│      logo.png
│      
├─components        我們自己寫(xiě)的組件
│      HelloWorld.vue
│      
└─views             VUE頁(yè)面，這么安排為了方便區(qū)分是組件還是用于路由跳轉(zhuǎn)的頁(yè)面
        About.vue
        Home.vue

我們直接看到入口文件

// main.js

import Vue from "vue"
import App from "./App.vue"
import router from "./router"   //在入口文件引用了router 并且 在newVue的時(shí)候 把router掛在到了router屬性上
import store from "./store"

Vue.config.productionTip = false

new Vue({
  router,   // 掛載
  store,
  render: h => h(App)
}).$mount("#app")

接著我們看到 router.js文件

//router.js

import Vue from "vue"
import Router from "vue-router"  //這里引用了vue-router 并且用Vue.use來(lái)使用Router
import Home from "./views/Home.vue"

Vue.use(Router)

// Router的內(nèi)置屬性
export default new Router({
  mode: "history",  //要使用hash模式還是 history模式 我們一般情況下還是用 hash模式 history在后臺(tái)支持的情況下可以開(kāi)啟
  base: process.env.BASE_URL,  // 應(yīng)用的基路徑。例如，如果整個(gè)單頁(yè)應(yīng)用服務(wù)在 /app/ 下，然后 base 就應(yīng)該設(shè)為 "/app/"
  routes: [              //這就是真正寫(xiě)路由的地方了 
    {
      path: "/",        //  當(dāng)路由是/的時(shí)候 我們匹配哪個(gè)組件(這里是Home.vue)
      name: "home",
      component: Home
    },
    {
      path: "/about",   //  當(dāng)路由是/about的時(shí)候 我們匹配哪個(gè)組件(About.vue)
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")   //路游懶加載，推薦使用這種模式，不過(guò)我們需要改寫(xiě)一下
    }
  ]
})

稍微做一下懶加載模式的改寫(xiě)

//router.js

import Vue from "vue"
import Router from "vue-router"  //這里引用了vue-router 并且用Vue.use來(lái)使用Router

Vue.use(Router)

const Home = ()=> import("./views/Home.vue")   //使用常量模式 提前聲明 并且在component中使用 這樣我們就完成了一個(gè)可以簡(jiǎn)單實(shí)用的路由了
const About = ()=> import("./views/About.vue")


// Router的內(nèi)置屬性
export default new Router({
  mode: "history",  //要使用hash模式還是 history模式 我們一般情況下還是用 hash模式 history在后臺(tái)支持的情況下可以開(kāi)啟
  base: process.env.BASE_URL,  // 應(yīng)用的基路徑。例如，如果整個(gè)單頁(yè)應(yīng)用服務(wù)在 /app/ 下，然后 base 就應(yīng)該設(shè)為 "/app/"
  routes: [              //這就是真正寫(xiě)路由的地方了 
    {
      path: "/",        //  當(dāng)路由是/的時(shí)候 我們匹配哪個(gè)組件(這里是Home.vue)
      name: "home",
      component: Home
    },
    {
      path: "/about",   //  當(dāng)路由是/about的時(shí)候 我們匹配哪個(gè)組件(About.vue)
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: About
    }
  ]
})

那么 這些路由組件怎么展示呢？在哪里展示呢？
這里我們要看到 App.vue文件

到這里 我們一個(gè)簡(jiǎn)單的基礎(chǔ)的路由已經(jīng)寫(xiě)好了 可以使用了

如何創(chuàng)建子路由呢？其實(shí)也是相當(dāng)簡(jiǎn)單的

//router.js

import Vue from "vue"
import Router from "vue-router"  //這里引用了vue-router 并且用Vue.use來(lái)使用Router

Vue.use(Router)

const Home = ()=> import("./views/Home.vue")   //使用常量模式 提前聲明 并且在component中使用 這樣我們就完成了一個(gè)可以簡(jiǎn)單實(shí)用的路由了
const About = ()=> import("./views/About.vue")
const Children = ()=> import("./views/Children.vue")  //我們引入這個(gè)頁(yè)面 頁(yè)面內(nèi)容

// Router的內(nèi)置屬性
export default new Router({
  // mode: "history",  
  base: process.env.BASE_URL,  
  routes: [
    {
      path: "/",       
      name: "home",
      component: Home,
      children:[
        {
          path: "about",  
          name: "about",
          component: About,
        },
        {
          path:"children",
          name:"children",
          component:Children
        },  //這時(shí)候我們?cè)L問(wèn) 訪問(wèn)about 實(shí)際上是home的子路由了
        // 它是home的子路由，所以我們需要在home里面再書(shū)寫(xiě)一個(gè)路由顯示的組件     子路由的內(nèi)容就會(huì)顯示在其 router-view下面
      ]
    }
  ]
})

這里我把改進(jìn)后的 app.vue 和 about.vue 等代碼貼出。

編程式的導(dǎo)航 router.push
編程式的導(dǎo)航傳參我們需要使用 this.$router.push() 這個(gè)方法 我們有三種傳參方式

聲明式的導(dǎo)航
聲明式的導(dǎo)航也分為三種方式

  click to news page

  click to news page

  click to news page

1.命名路由搭配params，刷新頁(yè)面參數(shù)會(huì)丟失
2.查詢參數(shù)搭配query，刷新頁(yè)面數(shù)據(jù)不會(huì)丟失
3.接受參數(shù)使用this.$router后面就是搭配路由的名稱就能獲取到參數(shù)的值

url 傳參

這種傳參方法我們需要在書(shū)寫(xiě)路由的時(shí)候做一個(gè)小小的改動(dòng)

//router.js

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

const Home = ()=> import("./views/Home.vue")   
const About = ()=> import("./views/About.vue")
const Children = ()=> import("./views/Children.vue")

// Router的內(nèi)置屬性
export default new Router({
  // mode: "history",  
  base: process.env.BASE_URL,  
  routes: [
    {
      path: "/",       
      name: "home",
      component: Home,
      children:[
        {
          path: "about/:id",  // 我們?cè)诤竺婕尤?:id 這樣我們?cè)趗rl輸入的地址相應(yīng)就變成了 /about/3  我們?cè)赼bout組件內(nèi) 通過(guò) this.$route.params  如何動(dòng)態(tài)監(jiān)聽(tīng)路由的變化呢？要知道當(dāng)我們僅僅參數(shù)變化組件可是沒(méi)有刷新的，提示一下 watch可是可以監(jiān)聽(tīng)某些數(shù)據(jù)哦~實(shí)戰(zhàn)課程我會(huì)帶大家了解一下這個(gè)該如何運(yùn)用
          name: "about",
          component: About,
        },
        {
          path:"children",
          name:"children",
          component:Children
        }, 
      ]
    }
  ]
})

相應(yīng)頁(yè)面改動(dòng)如下 home.vue about.vue

404的制作

其實(shí)vue-router里面還有很多細(xì)節(jié)內(nèi)容，這里由于我們是基礎(chǔ)課程所以不做太詳細(xì)的介紹，相信大家在瀏覽網(wǎng)頁(yè)的時(shí)候經(jīng)常會(huì)看到404頁(yè)面，那么用我們的vue-router如何去實(shí)現(xiàn)一個(gè)404呢？實(shí)際上是非常簡(jiǎn)單的
我們需要在router.js里面書(shū)寫(xiě)一個(gè)通配路徑放置在最后位置，當(dāng)所有的路徑都不匹配的時(shí)候，就會(huì)去通配這樣一個(gè)404頁(yè)面提示大家頁(yè)面丟失了，下面我詳細(xì)給大家書(shū)寫(xiě)一下

// router.js
import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

const Home = ()=> import("./views/Home.vue")   
const About = ()=> import("./views/About.vue")
const Children = ()=> import("./views/Children.vue")
const NotFound = ()=> import("./views/notFound.vue")

// Router的內(nèi)置屬性
export default new Router({
  // mode: "history",  
  base: process.env.BASE_URL,  
  routes: [
    {
      path: "/",       
      name: "home",
      component: Home,
      children:[
        {
          path: "about/:id", 
          name: "about",
          component: About,
        },
        {
          path:"children",
          name:"children",
          component:Children
        },
      ]
    },
    {
      path: "*",
      name: "404",
      component: NotFound,
    }
  ]
})

學(xué)完這些，你對(duì)于vue-router的基本運(yùn)用已經(jīng)可以算是合格了，工作中的大部分用法也都接觸到了，我們接下來(lái)講解vuex。

首先來(lái)一個(gè)小demo展示一下vuex的具體用途

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    number:0,
  },
  mutations: {
    ADD(state){
      state.number++
    },
    SUB(state){
      state.number--
    }
  },
  actions: {

  }
})

這樣一個(gè)小小的demo實(shí)際上已經(jīng)詮釋了我們vuex的作用，我們需要在刷新之前永久保留的狀態(tài)，并且想要遠(yuǎn)距離傳參并且及時(shí)做出響應(yīng)，那么都可以使用vuex來(lái)進(jìn)行。它就是一個(gè)狀態(tài)管理和加工的倉(cāng)庫(kù)，一共有五個(gè)重要屬性，state，mutations，actions , getter , module 這么五個(gè)小玩意 我會(huì)帶大家一個(gè)一個(gè)認(rèn)識(shí)他們的作用，并且教會(huì)大家基本用法，當(dāng)然了，它也是有較為高級(jí)的小用法的。我們實(shí)戰(zhàn)課也會(huì)使用稍微高級(jí)的用法來(lái)講解。

我們用VUE文件來(lái)類比講解store
state就相當(dāng)于vue中的data屬性，所有的狀態(tài)或者說(shuō)是數(shù)據(jù)都存儲(chǔ)在這個(gè)state里面，我們?cè)趧e的地方獲取需要使用 this.$store.state.屬性名稱 來(lái)獲取相應(yīng)的值，并且我們可以通過(guò) mutations 和 actions 來(lái)改變state的值，從而觸發(fā)所有使用到state的地方刷新。state里可以存儲(chǔ)各種數(shù)據(jù)類型，data里面可以用的數(shù)據(jù)類型，state里面同樣可以使用。

getters我們類比到vue中，那么它應(yīng)該是 computed了 我們?cè)谑褂玫臅r(shí)候 要使用 this.$store.getters.屬性名 用法也和computed類似，它實(shí)際上是調(diào)用一個(gè)方法，然后獲取到的數(shù)據(jù)是經(jīng)過(guò)一系列處理后并且return回來(lái)的數(shù)據(jù)，它的具體寫(xiě)法是。

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    number:0,
  },
  mutations: {
    ADD(state){
      state.number++
    },
    SUB(state){
      state.number--
    }
  },
  actions: {

  },
  getters:{
    getNumber(state){   //getter的書(shū)寫(xiě)方法
      return state.number + 100
    }
  }
})

這就是getters的簡(jiǎn)單實(shí)用

mutations類比到vuex中應(yīng)該是 methods
它是更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    number:0,
  },
  mutations: {
    ADD(state){  //我們把state傳入 就可以對(duì) state內(nèi)的數(shù)據(jù)進(jìn)行我們想要的變化，它必須按照我們想要得到的格式去變化， 想要直接提交mutations 需要使用 this.$stote.commit("mutations的方法名",參數(shù)) 如果想要在mutations方法中傳參，寫(xiě)法就要變成 ADD(state,形參){ ... } 這樣一種形式了 我舉個(gè)例子
      state.number++
    },
    SUB(state){
      state.number--
    },
    // ADDPARAM(state,param){
    //   if (typeof param !== "number"){
    //     param = 0
    //   }
    //   state.number = state.number + param
    // }  這個(gè)方法就可以傳入我們想用的參數(shù)了，相應(yīng)調(diào)用的地方也需要改變
  },
  actions: {

  },
  getters:{
    getNumber(state){   //getter的書(shū)寫(xiě)方法
      return state.number + 100
    }
  }
})

帶參數(shù)的commit如何使用

actions屬性用法和mutations類似，但是actions我們是不可以修改state的 需要在actions通過(guò)commit來(lái)調(diào)用mutations來(lái)修改數(shù)據(jù)，那么action的意義何在呢？處理異步事件就要用action來(lái)做了呀。調(diào)用方法是，this.$store.dispatch("action的名字",參數(shù))

書(shū)寫(xiě)的方法呢 我給大家展示一下

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    number:0,
  },
  mutations: {
    ADD(state){ 
      state.number++
    },
    SUB(state){
      state.number--
    },
    ADDPARAM(state,param){
      if (typeof param !== "number"){
        param = 0
      }
      state.number = state.number + param
    } 
  },
  actions: {
    ASYNCADD(context,param){  //這里我們傳入context上下文，里面包含 commit, state ,getters 這三個(gè)屬性都可以通過(guò)context來(lái)調(diào)用到并且觸發(fā)內(nèi)部方法
      setTimeout(function(){
        context.commit("ADDPARAM",param)
      },1000)
    }
  },
  getters:{
    getNumber(state){   //getter的書(shū)寫(xiě)方法
      return state.number + 100
    }
  }
})

action的使用

vuex是不是非常簡(jiǎn)單呢,到這里大家可能在想，如果我的項(xiàng)目很大 我有很多的這些個(gè)方法啊，狀態(tài)啊，我都寫(xiě)在這里不就亂了嗎？沒(méi)錯(cuò)，肯定亂了，所以vuex還提供了modules 方便我們分塊管理

由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。
為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割

我們把上面的這些個(gè)代碼分割出去

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const children = {   // 因?yàn)槲覀兪菍?xiě)在了children這個(gè)組件里面 這個(gè)命名規(guī)則也好讓我們知道它存在于哪里
  state: {
    number:0,
  },
  mutations: {
    ADD(state){  
      state.number++
    },
    SUB(state){
      state.number--
    },
    ADDPARAM(state,param){
      if (typeof param !== "number"){
        param = 0
      }
      state.number = state.number + param
    }  
  },
  actions: {
    ASYNCADD(context,param){  
      setTimeout(function(){
        context.commit("ADDPARAM",param)
      },1000)
    }
  },
  getters:{
    getNumber(state){   
      return state.number + 100
    }
  }
}


export default new Vuex.Store({
  modules:{
    children, // 這里我們把children傳入以后 還是一樣可以使用我們的哪些方法，不過(guò)我們是state要加上 modules名字 所以我們的children.vue 要相應(yīng)修改
  }
})

很多時(shí)候，我們?cè)谡绞褂弥卸紩?huì)加上命名空間，也就是 modules里面的 namespaced 屬性我們讓它變?yōu)? namespaced: true, 如果大家想要學(xué)習(xí)，可以去vuex文檔學(xué)習(xí)，得益于es6 vuex給我們提供了
mapState, mapGetters, mapActions 和 mapMutations 這四巨頭 我們可以輕松使用命名空間 這里不做過(guò)多講解，實(shí)戰(zhàn)課程中我們邊用邊說(shuō)。