Vue构建项目(vue、vue-router、vuex、vue-

Vue是主要的核心库，axios是前后交互的逻辑方法，vuerouter路由，vuex是状态管理器。

1. 项目目录->启动集成终端（cmd）

1. cnpm i vue vue-cli webpack -g
2. vue init webpack-simple myProject初始化项目
3. cd myProject->cnpm i->cnpm i axios vue-axios vue-router vuex -S

目录结构:
.
├── src
| ├── assets
| ├── App.vue
| └── main.js
├── .babelrc
├── .editorconfig
├── index.html
├── package.json
├── README.md
└── webpack.config.js

2.配置routes.js

1. src文件夹中创建routes.js

import Home from './components/home'
import Name from './components/name'

export const routes = [
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'/Name',
                component:Name
            }
        ]
    },
    {
        path:'*',
        redirect:'/home'
    }
]

3. vuex的配置

1. src文件夹中创建index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state:{
        login:false
    },
    getters:{
        login:state => {
            return state.login;
        }
    },
    mutations:{
        checkLogin:(state,payload)=>{
            state.login = payload;
        }
    },
    actions:{
        checkLogin:({commit},payload)=>{
            commit('checkLogin',payload);
        }
    }
})

4. main.js进行配置(vue-router/vue-axios/vuex)

//vue-router
import VueRoute from 'vue-router';
import {routes} from './routes';

Vue.use(VueRoute);

const router = new VueRoute({
  routes,
  mode:'history'
})

router.beforeEach((to,from,next)=>{ //路由钩子函数
  iView.LoadingBar.start();
  next();
})

router.afterEach((to,from,next)=>{ //路由钩子函数
  iView.LoadingBar.finish();
  next();
})

//vue-axios
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios,axios);
axios.defaults.headers.post['Content-type']='application/x-www-form-urlencoded';

//vuex
import {store} from './index.js'

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

总结

简而言之，需要用到第三方类库的时候，都得import ... from ...，然后Vue.use(...)
例如:

//main.js
import router from './router'

//router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  mode: "history",
  routes:[
  ...
  ]
})