手挽手带你学VUE：四档 Vue-cli3 Vuex Vue-router

我们看到如上界面以后，选择 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 这四巨头 我们可以轻松使用命名空间 这里不做过多讲解，实战课程中我们边用边说。