（二）初学Vue之用Vue--cli+vue-router+vuex的最简单应用。

一.使用vue-router路由跳转页面

    1.使用Vue.js做项目，一个页面是由多个组件组成，所以在跳转页面的时候，并不适合用传统的“href”方式，于是vue-router应运而生。

官方文档：https://router.vuejs.org/zh-cn/essentials/getting-started.html

本次项目结构：

                          

    2.命令行进入到项目目录，生成项目,并安装vue-router。

①安装vue-rouer:过程如下：(ps:在下边Install vue-router?这行，选择Yes，直接安装vue-router。或者之后自己手动安装，cnpm install vue-router -D)

                

②手动安装依赖：cnpm instal

进入项目：cd vue_project_9

运行项目：npm run dev

    3.项目文件主要代码。

①在src文件夹下，创建一个router文件夹，和main.js平级。之后在rouer文件夹下创建一个index.js文件，引入所需组件，创建对象。

index.js代码如下：

                         

②main.js代码：

                       

③App.vue：

④home.vue:

    page01.vue

    page02.vue:

    page01-A.vue

    page02-B.vue

    end.vue

二.vuex的简单使用。

    项目结构简单，父子组件之间的数据传递可以使用props或者$emit等方式。但若为大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就比较复杂。Vue的状态管理工具Vuex完美的解决了这个问题。

1.安装并引入Vuex。

①安装：cnpm install vuex -S

②在main.js中引入：

import store from './vuex/store.js'

new Vue({

el: '#app',

store,

router,

render: h => h(App)

})

2.构建核心仓库store.js。

      

3.状态映射到组件。