*vue官網(wǎng)：https://cn.vuejs.org/
vue-router官網(wǎng)：https://router.vuejs.org/zh-cn/
vuex官網(wǎng)：https://vuex.vuejs.org/zh-cn/
axios中文說明：https://www.kancloud.cn/yunye/axios/234845

vue-cli建立項(xiàng)目

npm install -g vue-cli 全局安裝vue腳手架
vue init webpack-simple project-name 使用webpack-simple模板建立項(xiàng)目
npm run install 安裝依賴庫(kù)
npm run dev 啟動(dòng)開發(fā)服務(wù)器

配置各種loader

#在webpack.config.js文件中添加
module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {}
                    // other vue-loader options go here
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },

集成vue-router

#在src下新建router.config.js文件，用于存儲(chǔ)路由配置信息
const updateUser = r => require.ensure([], () => r(require('./components/user/updateUser.vue')), 'updateUser')
export default [
    {
        path: '/updateUser',
        component: updateUser
    }
];

*在main.js中引入vue-router
import VueRouter from 'vue-router'
import routes from './router.config' 
Vue.use(VueRouter)
const router = new VueRouter({
    routes,
    mode: 'history',
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            if (from.meta.keepAlive) {
                from.meta.savedPosition = document.body.scrollTop;
            }
            return {x: 0, y: to.meta.savedPosition || 0}
        }
    }
})
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

集成vuex

• src下新建store文件夾

  
  

  ----------------------------------------------------------------------------------------------
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getter'
Vue.use(Vuex)
#index.js中主要配置state-->就是我們所需要的數(shù)據(jù)
const state = {
    mytest: 'NB',
}
#導(dǎo)出vuex對(duì)象樹
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
})
  ----------------------------------------------------------------------------------------------
mutation-types.js
#主要用來(lái)配置事件（動(dòng)作）類型
export const MY_TEST = 'MY_TEST'
  ----------------------------------------------------------------------------------------------
mutations.js
#事件具體實(shí)現(xiàn)，必須是同步操作
import {
    MY_TEST,
} from './mutation-types.js'
export default {
    [MY_TEST](state){
        state.mytest = "SB"
    }
}
  ----------------------------------------------------------------------------------------------
action.js
#提供事件的異步調(diào)用（如異步發(fā)送郵件）
  ----------------------------------------------------------------------------------------------
getter.js
#提供state的計(jì)算調(diào)用
有時(shí)候我們需要從store中的state中派生出一些狀態(tài)，例如對(duì)列表進(jìn)行過濾并計(jì)數(shù)
  ----------------------------------------------------------------------------------------------

• 在main.js中引入vuex

import store from './store/'
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})

集成axios

#在src目錄下新建http.js文件，導(dǎo)出axios對(duì)象，該文件主要提供axios配置，如請(qǐng)求攔截器等等
import axios from 'axios'
// axios 配置
axios.defaults.timeout = 5000;
// http request 攔截器
// axios.interceptors.request.use(
//     config => {
//         if (store.state.token) {
//             config.headers.Authorization = `token ${store.state.token}`;
//         }
//         return config;
//     },
//     err => {
//         return Promise.reject(err);
//     });
// http response 攔截器
// axios.interceptors.response.use(
//     response => {
//         return response;
//     },
//     error => {
//         if (error.response) {
//             switch (error.response.status) {
//                 case 401:
//                     // 401 清除token信息并跳轉(zhuǎn)到登錄頁(yè)面
//                     store.commit(types.LOGOUT);
//                     router.replace({
//                         path: 'login',
//                         query: {redirect: router.currentRoute.fullPath}
//                     })
//             }
//         }
//         // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
//         return Promise.reject(error.response.data)
//     });
export default axios;

項(xiàng)目整體目錄結(jié)構(gòu)

dist --> 項(xiàng)目編譯后的目錄，也是我們最后要部署到服務(wù)器上的文件
node_modules --> node.js庫(kù)
src/API --> 封裝獲取API數(shù)據(jù)的方法
src/assets --> 資源文件，如js，css，圖片等
src/compents --> .vue文件，即組件
src/store --> vuex單例數(shù)據(jù)樹配置文件夾
src/utils --> 封裝常用的工具類
APP.vue --> 主頁(yè)面組件
http.js --> 封裝axios
main.js --> 工程入口文件，可在其中配置導(dǎo)入全局要是用的組件及庫(kù)
router.config.js --> 封裝路由信息配置
index.html --> 訪問主頁(yè)，需要部署到服務(wù)器上
package.json --> 依賴庫(kù)配置
webpack.config.js --> webpack工程配置，主要配置loder，用于解析各類文件