vuecli+elementUI+vue-router+vueX

引入element ui:

1.下载
npm i element-ui -S
vue add element

2.在main.js中写入下面代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

引入vue-router

1.下载
npm/cnpm install vue-router --save

2.在main.js中引入
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.创建路由组件，在components文件夹中创建组件
4.配置参数 如：
const routes = [   {path:'/foo',component:foo}  ] 
5.实例化vueRouter
const router = new VueRouter({ routes})   //第五步中花括号里面的的routes要和第四步定义的同名
6. 挂载路由
new Vue({
 router, //增加内容
 render: h => h(App), }).$mount('#app')
 7.使用：
 <router-link to='/child'>child</router-link>
 <router-view></router-view> <!-- 路由匹配到的组件将渲染在这里 -->

vue项目启动命令：npm run serve

引入vueX（以及vueX的小例子）

1.下载：
npm install vuex --save

2.在main.js中引入
import Vuex from 'vuex'
Vue.use(Vuex)
Vue 实例上得挂载 上store 

在src文件夹下新建一个store 文件夹，创建store .js然后写入下面内容，最后将store .js引入main.js中。参考（https://www.cnblogs.com/mica/p/10757965.html）

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
    state:{
        name:'超级玛丽',
        age:'20'
    },
    mutations:{
        showPeople(state,msg){
            state.name=msg
        }
    }
})
export default store

在任意页面打印this
    created(){
      console.log(this)
    }

如图，找到VueComponent下面我们定义的state和mutation

    created(){
      console.log(this)
      console.log(this.$store.state.name)  //拿state的name
    }

通过mutation中的方法改变数据


此时页面上的name已经改变，详细见vuex官网