Vue项目

1、新建Vue项目：vue init webpack projectName

2、vue-router模块

　　1、安装vue-router模块：npm install vue-router --save-dev

　　2、在src文件夹下新建文件夹router继续新建文件index.js

　　　　编辑index.js文件

　　　　首先引入模块：

　　　　　　import Vue from 'vue';

　　　　　　import VueRouter from 'vue-router';

　　　　　　import home from '../component/home'

　　　　　　import user from '../component/user'

　　　　　　...(引入自己定义的组件)

　　　　声明引用：

　　　　　　Vue.use(VueRouter);

　　　　在接口通告新建的 router:

　　　　　　exports default new VueRouter({

　　　　　　　　routes: [

　　　　　　　　　　{path: '/home', component: home},

　　　　　　　　　　{path: '/user', component: user}...

　　　　　　　　]

　　　　　　})

　　3、在main.js中编辑

　　　　import router from './router'（引入模块）

　　　　router（在Vue对象中加入router）

　　4、在App组件(组件都可以)中引用

　　　　<router-link to="/home">home</router-link>

　　　　<router-link to="/user">user</router-link>

　　　　<div>

　　　　　　<router-view></router-view>

　　　　</div>

2、vuex模块

　　1、安装vuex模块：npm install vuex --save

　　2、在src文件夹下创建新文件夹store再创建文件index.js

　　　　编辑index.js文件

　　　　引入模块:

　　　　　　import Vue from 'vue'

　　　　　　import Vuex from 'vuex'

　　　　声明引用：

　　　　　　Vue.use(Vuex)

　　　　宣告出口：

　　　　　　export default new Vuex.Store({

　　　　　　　　

　　　　　　})

　　3、在main.js中编辑

　　　　import store from './store/index'（引入模块）

　　　　store（在Vue对象中加入store）

　　4、在index.js中继续编辑：

　　　　1、声明变量（单一状态树）

　　　　　　const state = {

　　　　　　　　count,

　　　　　　　　sum...(等等需要在不同组件中使用的变量)

　　　　　　}

　　　　　　在其他组件中引用：

　　　　　　　　1、先引入store模块：import store from '@/store/index'

　　　　　　　　2、正常访问变量：$store.state.count

　　　　2、声明控制状态对象的方法：

　　　　　　const mutations = {

　　　　　　　　add (state, n) {

　　　　　　　　　　state.count += n;

　　　　　　　　}

　　　　　　}

　　　　　　在其他组件中引用:

　　　　　　　　1、正常访问：$.store.commit('add', '10')