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

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

接下來大家按照如上配置，基本可以完成項目搭建。等待安裝完畢后執行

cd helloworld
npm run serve

進入瀏覽器 打開 localhost:8080 如果看到Vue的歡迎界面，恭喜你，我們已經邁出成功第一步了

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

vue ui 

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

我們使用VUE一般是用來開發單頁程序，那么在單頁程序內的跳轉就要用到路由的形式，由于這里課程是要帶大家快速熟悉VUE并且使用VUE，所以原理這里暫且跳過，直接告訴大家使用方法。
我們在開始選擇框架要用到的東西的時候已經選擇了Vue-Router,這里我們直接上代碼使用即可。我們這里就搭配著Vue-Cli3的腳手架來講解，這里順便為大家講解一下Vue-cli3腳手架為我們創建的目錄結構

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

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

我們直接看到入口文件

// main.js

import Vue from "vue"
import App from "./App.vue"
import router from "./router"   //在入口文件引用了router 并且 在newVue的時候 把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來使用Router
import Home from "./views/Home.vue"

Vue.use(Router)

// Router的內置屬性
export default new Router({
  mode: "history",  //要使用hash模式還是 history模式 我們一般情況下還是用 hash模式 history在后臺支持的情況下可以開啟
  base: process.env.BASE_URL,  // 應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"
  routes: [              //這就是真正寫路由的地方了 
    {
      path: "/",        //  當路由是/的時候 我們匹配哪個組件(這里是Home.vue)
      name: "home",
      component: Home
    },
    {
      path: "/about",   //  當路由是/about的時候 我們匹配哪個組件(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")   //路游懶加載，推薦使用這種模式，不過我們需要改寫一下
    }
  ]
})

稍微做一下懶加載模式的改寫

//router.js

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

Vue.use(Router)

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


// Router的內置屬性
export default new Router({
  mode: "history",  //要使用hash模式還是 history模式 我們一般情況下還是用 hash模式 history在后臺支持的情況下可以開啟
  base: process.env.BASE_URL,  // 應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"
  routes: [              //這就是真正寫路由的地方了 
    {
      path: "/",        //  當路由是/的時候 我們匹配哪個組件(這里是Home.vue)
      name: "home",
      component: Home
    },
    {
      path: "/about",   //  當路由是/about的時候 我們匹配哪個組件(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文件

到這里 我們一個簡單的基礎的路由已經寫好了 可以使用了

如何創建子路由呢？其實也是相當簡單的

//router.js

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

Vue.use(Router)

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

// Router的內置屬性
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
        },  //這時候我們訪問 訪問about 實際上是home的子路由了
        // 它是home的子路由，所以我們需要在home里面再書寫一個路由顯示的組件     子路由的內容就會顯示在其 router-view下面
      ]
    }
  ]
})

這里我把改進后的 app.vue 和 about.vue 等代碼貼出。

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

聲明式的導航
聲明式的導航也分為三種方式

  click to news page

  click to news page

  click to news page

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

url 傳參

這種傳參方法我們需要在書寫路由的時候做一個小小的改動

//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的內置屬性
export default new Router({
  // mode: "history",  
  base: process.env.BASE_URL,  
  routes: [
    {
      path: "/",       
      name: "home",
      component: Home,
      children:[
        {
          path: "about/:id",  // 我們在后面加入/:id 這樣我們在url輸入的地址相應就變成了 /about/3  我們在about組件內 通過 this.$route.params  如何動態監聽路由的變化呢？要知道當我們僅僅參數變化組件可是沒有刷新的，提示一下 watch可是可以監聽某些數據哦~實戰課程我會帶大家了解一下這個該如何運用
          name: "about",
          component: About,
        },
        {
          path:"children",
          name:"children",
          component:Children
        }, 
      ]
    }
  ]
})

相應頁面改動如下 home.vue about.vue

404的制作

其實vue-router里面還有很多細節內容，這里由于我們是基礎課程所以不做太詳細的介紹，相信大家在瀏覽網頁的時候經常會看到404頁面，那么用我們的vue-router如何去實現一個404呢？實際上是非常簡單的
我們需要在router.js里面書寫一個通配路徑放置在最后位置，當所有的路徑都不匹配的時候，就會去通配這樣一個404頁面提示大家頁面丟失了，下面我詳細給大家書寫一下

// 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的內置屬性
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,
    }
  ]
})

學完這些，你對于vue-router的基本運用已經可以算是合格了，工作中的大部分用法也都接觸到了，我們接下來講解vuex。

首先來一個小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: {

  }
})

這樣一個小小的demo實際上已經詮釋了我們vuex的作用，我們需要在刷新之前永久保留的狀態，并且想要遠距離傳參并且及時做出響應，那么都可以使用vuex來進行。它就是一個狀態管理和加工的倉庫，一共有五個重要屬性，state，mutations，actions , getter , module 這么五個小玩意 我會帶大家一個一個認識他們的作用，并且教會大家基本用法，當然了，它也是有較為高級的小用法的。我們實戰課也會使用稍微高級的用法來講解。

我們用VUE文件來類比講解store
state就相當于vue中的data屬性，所有的狀態或者說是數據都存儲在這個state里面，我們在別的地方獲取需要使用 this.$store.state.屬性名稱 來獲取相應的值，并且我們可以通過 mutations 和 actions 來改變state的值，從而觸發所有使用到state的地方刷新。state里可以存儲各種數據類型，data里面可以用的數據類型，state里面同樣可以使用。

getters我們類比到vue中，那么它應該是 computed了 我們在使用的時候 要使用 this.$store.getters.屬性名 用法也和computed類似，它實際上是調用一個方法，然后獲取到的數據是經過一系列處理后并且return回來的數據，它的具體寫法是。

// 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的書寫方法
      return state.number + 100
    }
  }
})

這就是getters的簡單實用

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

// 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傳入 就可以對 state內的數據進行我們想要的變化，它必須按照我們想要得到的格式去變化， 想要直接提交mutations 需要使用 this.$stote.commit("mutations的方法名",參數) 如果想要在mutations方法中傳參，寫法就要變成 ADD(state,形參){ ... } 這樣一種形式了 我舉個例子
      state.number++
    },
    SUB(state){
      state.number--
    },
    // ADDPARAM(state,param){
    //   if (typeof param !== "number"){
    //     param = 0
    //   }
    //   state.number = state.number + param
    // }  這個方法就可以傳入我們想用的參數了，相應調用的地方也需要改變
  },
  actions: {

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

帶參數的commit如何使用

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

書寫的方法呢 我給大家展示一下

// 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 這三個屬性都可以通過context來調用到并且觸發內部方法
      setTimeout(function(){
        context.commit("ADDPARAM",param)
      },1000)
    }
  },
  getters:{
    getNumber(state){   //getter的書寫方法
      return state.number + 100
    }
  }
})

action的使用

vuex是不是非常簡單呢,到這里大家可能在想，如果我的項目很大 我有很多的這些個方法啊，狀態啊，我都寫在這里不就亂了嗎？沒錯，肯定亂了，所以vuex還提供了modules 方便我們分塊管理

由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

我們把上面的這些個代碼分割出去

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

Vue.use(Vuex)

const children = {   // 因為我們是寫在了children這個組件里面 這個命名規則也好讓我們知道它存在于哪里
  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傳入以后 還是一樣可以使用我們的哪些方法，不過我們是state要加上 modules名字 所以我們的children.vue 要相應修改
  }
})

很多時候，我們在正式使用中都會加上命名空間，也就是 modules里面的 namespaced 屬性我們讓它變為 namespaced: true, 如果大家想要學習，可以去vuex文檔學習，得益于es6 vuex給我們提供了
mapState, mapGetters, mapActions 和 mapMutations 這四巨頭 我們可以輕松使用命名空間 這里不做過多講解，實戰課程中我們邊用邊說。