摘要：如果全部鉤子執(zhí)行完了，則導航的狀態(tài)就是確認的。中斷當前的導航。如果瀏覽器的改變了可能是用戶手動或者瀏覽器后退按鈕，那么地址會重置到或者跳轉(zhuǎn)到一個不同的地址。

githubhttps://github.com/cd-dongzi/vue-example

在utils.js 文件中 找到 generateLoaders 方法

把以下代碼進行更換

    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: "vue-style-loader"
        })
    } else {
        return ["vue-style-loader"].concat(loaders)
    }

更換成

    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: "vue-style-loader",
            publicPath: "../../"
        })
    } else {
        return ["vue-style-loader"].concat(loaders)
    }

打包就可以看到效果咯!

用vue-cli初始化的vue項目

再build文件夾下創(chuàng)建一個globalLessVars.js文件

在globalLessVars.js文件中 放入如下代碼

    const fs = require("fs");
    module.exports = function getLessVariables(file) {
        var themeContent = fs.readFileSync(file, "utf-8")
        var variables = {}
        themeContent.split("
").forEach(function(item) {
            if (item.indexOf("http://") > -1 || item.indexOf("/*") > -1) {
                return
            }
            var _pair = item.split(":")
            if (_pair.length < 2) return;
            var key = _pair[0].replace("
", "").replace("@", "")
            if (!key) return;
            var value = _pair[1].replace(";", "").replace("
", "").replace(/^s+|s+$/g, "")
            variables[key] = value
        })
        return variables
    }

在utils.js 引入 globalLessVars.js文件

const globalLessVars = require("./globalLessVars");

在static文件中創(chuàng)建 color.less 文件

在 color.less 文件中 放入如下代碼

    @theme-color: #c1866a;
    @vice-color: rgba(186,164,119,0.99);
    @blue-color: #2e90fe;

在util.js文件中如下解析 color.less 文件

    const colorsLess = globalLessVars(path.join(__dirname, "../static/color.less"));

再把util.js 文件中 cssLoaders方法中返回值改成以下代碼

    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders("less", {
            globalVars: colorsLess
        }),
        sass: generateLoaders("sass", { indentedSyntax: true }),
        scss: generateLoaders("sass"),
        stylus: generateLoaders("stylus"),
        styl: generateLoaders("stylus")
    }

大功告成

引用多個文件的話 就這可以這樣

    const colorsLess = getLessVariables(path.join(__dirname, "../static/color.less"));
    const stylesLess = getLessVariables(path.join(__dirname, "../static/style.less"));
    const allLess = Object.assign(colorsLess, stylesLess);
    
    less: generateLoaders("less", {
         globalVars: allLess
    })

具體詳情可以查看使用webpack+vue+less開發(fā)，使用less-loader，配置全局less變量

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

如果后臺沒給前端的 history 模式 匹配路徑的話， history 只適合在本地開發(fā)使用， 打包記得改回 hash 模式

import HelloWorld from "@/components/HelloWorld"

制定像 @ 這樣的自定義名稱

可以前往 webpack.base.conf.js 中如下設置:

    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "vue$": "vue/dist/vue.esm.js",
            "@": resolve("src"),
            "components": resolve("src/components"),
            "views": resolve("src/views")
        }
    }

如果出現(xiàn)類似以上的錯誤 , 前往 build 文件下 webpack.base.conf.js  中注釋調(diào) eslint-loader  這個loader  就行了

如果你不想使用eslint 代碼檢測 你可以在用vue-cli直接在創(chuàng)建vue項目的時候就選擇不生成代碼檢測這個eslint-loader

在 config 文件下的 index.js 文件中修改以下代碼

    proxyTable: {}
    

設置成

    proxyTable: {
        "/api": {
            target: "http://www.mytest.com", //這里放需要請求的接口
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        }
    } 
    
    //  請求接口的時候 http://www.mytest.com/login  可以寫成  /api/login

可以發(fā)起多個代理 (如下):

    proxyTable: {
        "/api": {
            target: "http://www.mytest.com", 
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        },
        "/a": {
            target: "http://www.test.com", 
            changeOrigin: true,
            pathRewrite: {
                "^/a": ""
            }
        }
    }

npm i babel-polyfill --save 下載 babel-polyfill 模塊

在webpack.base.conf.js 中做以下修改

    module.exports = {
        entry: {
          app: ["babel-polyfill", "./src/main.js"]
        },
        ......
    }
    

一般在我們請求后臺數(shù)據(jù)時,都會在請求過程中執(zhí)行動畫, 和統(tǒng)一管理請求錯誤,驗證TOKEN 等等的情況;
當你使用 axios 做請求時, 你可以做如下設置來解決以上問題

npm i axios qs --save 來下載這兩個模塊

創(chuàng)建fetch.js 文件，內(nèi)容如下：

    
    import axios from "axios"
    import qs from "qs"  // 直接post請求后臺取不到參數(shù),()

    // 發(fā)起請求時,會執(zhí)行該方法
    axios.interceptors.request.use(config => {
        //你可以在這里開始加載動畫,  查詢token  等等之類
        return config
    }, err => {
        return Promise.reject(err)
    })

    //接收到后臺的數(shù)據(jù)時執(zhí)行的方法
    axios.interceptors.response.use(response => response, err => Promise.resolve(err.response))


    //檢查狀態(tài)碼 status
    function checkStatus(res) {
        if (res.status === 200 || res.status === 304) { //當狀態(tài)正常是返回原樣的數(shù)據(jù)
            return res
        }
        return {  // 狀態(tài)不正常時可以返回自己自定義的一些格式或者狀態(tài)什么的
            ....
        }
    }

    //檢查后臺的code 值
    function checkCode(res) {
        if (res.data.code === 0) {  //code值錯誤時
            alert("出錯了")
        }
        return res
    }


    export default {
        get(url, params) {  //返回封裝后的 get 方法
            if (!url) return
            return axios({
                method: "get",
                url,
                params,
                timeout: 10000
            }).then(checkStatus).then(checkCode)
        },
        post(url, data) { //返回封裝后的 post 方法
            if (!url) return
            return axios({
                method: "post",
                url,
                data: qs.stringify(data),
                timeout: 10000
            }).then(checkStatus).then(checkCode)
        }
    }

   //在main.js中引入封裝后的axios  
    import http from "./utils/fetch"
    
    Vue.prototype.http = http;

post請求直接放參數(shù)， 為何后臺接收不到前端的參數(shù) axios發(fā)送post請求，springMVC接收不到數(shù)據(jù)問題

可以使用Vue.$set(object, key, value)來解決這個問題

具體可以參考這里 變化檢測問題（數(shù)組相關）

    export default new Router({
        routes: [
            {
                path: "/lazy",
                name: "lazy-loading",
                component: (resolve) => {  //這里加載了 記得上面就不需要在import 這個組件了
                    require(["../components/lazy-loading"], resolve)
                }
            }
        ]
    })
    

先創(chuàng)建一個vue的 loading 結(jié)構(gòu)

loading.vue

2.在創(chuàng)建一個JS 文件引入這個loading.vue

index.js

    import Vue from "vue"
    import LoadingComponent from "./loading.vue"
    
    
    //extend 是構(gòu)造一個組件的語法器.傳入?yún)?shù)，返回一個組件
    let LoadingConstructor = Vue.extend(LoadingComponent);
    let initComponent;
    
    //導出 顯示loading組件
    export const showLoading = (option={}) => {
        initComponent = new LoadingConstructor();
        initComponent.$mount();
        document.querySelector(option.container || "body").appendChild(initComponent.$el);
    }
    
    //導出 移除loading組件
    export const hideLoading = () => {
        initComponent.$el.parentNode.removeChild(initComponent.$el)
    }

3.最后創(chuàng)建一個js文件統(tǒng)一掛載所有自定義組件到vue原型上

output.js

    import Alert from "./alert/index.js"  //alert組件
    import { showLoading, hideLoading } from "./loading/index.js" //loading組件
    
    const install = function(Vue) { //通過install方法掛載到Vue原型上去
        Vue.prototype.$alert = Alert;
        Vue.prototype.$showLoading = showLoading;
        Vue.prototype.$hideLoading = hideLoading;
    }
    export default install

4.最后在main.js中引入 output.js

    import globalComponents from "./components/output"

    Vue.use(globalComponents);

在別的組件中通過如下直接調(diào)用就行了

    created () {
        this.$showLoading()
    
        setTimeout( () => {
            this.$hideLoading()
        }, 2000);

    }

1.用transition元素來做動畫， 通過綁定name元素來切換不同的動畫

    
返回
        
       

2.動畫樣式

    .view {
      padding: 50px 300px;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      transition: all 0.3s linear;
    }
    .slide-left-enter,
    .slide-right-leave-active {
      opacity: 0;
      transform: translate(100%, 0);
    }
    
    .slide-left-leave-active,
    .slide-right-enter {
      opacity: 0;
      transform: translate(-100%, 0);
    }    
    

3.給路由添加返回的狀態(tài)

    import Vue from "vue"
    import Router from "vue-router"
    
    Router.prototype.back = false;
    Router.prototype.goBack = function () {
          this.back = true;
          this.go(-1)
    }

4.檢測路由的改變來切換狀態(tài)，

    export default {
      name: "app",
        data() {
            return {
                transition: "slide-left"
            };
        },
        watch: {
            $route (to, from ) {
                var back = this.$router.back;
                if (back) { //點擊了返回
                    this.transition = "slide-right"
                }else{
                    this.transition = "slide-left"
                }
                this.$router.back = false;
            }
        }
    
    }

    beforeCreate () {
        console.log("--------------beforeCreate-------------------")
        console.log("在實例創(chuàng)建之后同步調(diào)用。此時實例已經(jīng)結(jié)束解析選項，這意味著已建立：數(shù)據(jù)綁定，計算屬性，方法，watcher/事件回")
        console.log("但是還沒有開始 DOM 編譯，$el 還不存在,但是實例存在")
    },
    created () {
        console.log("--------------created-------------------")
        console.log("在實例創(chuàng)建完成后被立即調(diào)用,掛載階段還沒開始，$el屬性目前不可見")
    },
    beforeMount () {
        console.log("--------------beforeMount-------------------")
        console.log("模板編譯掛載之前")
    },
    mounted () {
        console.log("--------------mounted-------------------")
        console.log("模板編譯掛載之后")
    },
    beforeUpdate () {
        console.log("--------------beforeUpdate-------------------")
        console.log("組件更新之前")
    },
    updated () {
        console.log("--------------updated-------------------")
        console.log("組件更新之后")
    },
    activated () {
        console.log("--------------activated-------------------")
        console.log("keep-alive 組件激活時調(diào)用")
    },
    deactivated () {
        console.log("--------------deactivated-------------------")
        console.log("keep-alive 組件停用時調(diào)用")
    },
    beforeDestroy () {
        console.log("--------------beforeDestroy-------------------")
        console.log("組件銷毀之前")
    },
    destroyed () {
        console.log("--------------destroyed-------------------")
        console.log("組件銷毀之后")
    }

    //全局鉤子函數(shù)
    const router = new VueRouter({ ... })
    
    router.beforeEach((to, from, next) => {
        // do something  可以檢測用戶是否登錄啥的
        next();
    });

    router.afterEach((to, from, next) => {
        console.log(to.path);
    });


    to: 即將要進入的目標 [路由對象]
    from: 當前導航正要離開的路由
    next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導航的狀態(tài)就是confirmed （確認的）。
    next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from
    next("/") 或者 next({ path: "/" }): 跳轉(zhuǎn)到一個不同的地址。當前的導航被中斷，然后進行一個新的導航

   


    //組件內(nèi)的鉤子
    beforeRouteEnter (to, from, next) {
        // 在渲染該組件的對應路由被 confirm 前調(diào)用
        // 相對于組件來說的，而且應該是在路由進入之前開始準備的 所以beforeRouteEnter是調(diào)用ajax的時機
        // 不能獲取組件實例 `this`
        // 因為當鉤子執(zhí)行前，組件實例還沒被創(chuàng)建

        next();
    },

    beforeRouteLeave (to, from, next) {
        //在組件的生命周期完成后，且舊路由即將切換走，新路由beforeEach的時機執(zhí)行
    }

在config 文件下的 index.js 中 修改以下屬性 (如果你想在本地打包能看到頁面效果, 此步驟不要忘記哦)

assetsPublicPath: "/" 

更改成

assetsPublicPath: "./" 

在構(gòu)建生產(chǎn)環(huán)境版本時是否開啟source map

    productionSourceMap: true
    

當把這個設置 置為 false 時, 文件體積會變得很小 JavaScript Source Map 詳解

    .babelrc

    {   
        // 此項指明，轉(zhuǎn)碼的規(guī)則
        "presets": [
            // env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉(zhuǎn)碼，并且設置amd,commonjs這樣的模塊化文件，不進行轉(zhuǎn)碼
            ["env", {
                "modules": false,
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
                }
            }],
            // 下面這個是不同階段出現(xiàn)的es語法，包含不同的轉(zhuǎn)碼插件
            "stage-2"
        ],

        // 下面這個選項是引用插件來處理代碼的轉(zhuǎn)換，transform-runtime用來處理全局函數(shù)和優(yōu)化babel編譯
        "plugins": ["transform-runtime"],

        // 下面這段是在特定的環(huán)境中所執(zhí)行的轉(zhuǎn)碼規(guī)則，當環(huán)境變量是下面的test就會覆蓋上面的設置
        "env": {

            // test 是提前設置的環(huán)境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認就是development
            "test": {
                "presets": ["env", "stage-2"],

                // instanbul是一個用來測試轉(zhuǎn)碼后代碼的工具
                "plugins": ["istanbul"]  
            }
        }
    }

    .editorconfig

    charset = utf-8  //編碼
    indent_style = space //縮進風格,基于空格做縮進
    indent_size = 2   //縮進大小是2格
    end_of_line = lf   //換行符的風格
    insert_final_newline = true  //當你創(chuàng)建一個文件，會自動在文件末尾插入新行
    trim_trailing_whitespace = true  //自動移除行尾多余空格

    package.json


      "name": "example",
      "version": "1.0.0",
      "description": "A Vue.js project",
      "author": "",
      "private": true,
      "scripts": {  
        // 例: "dev": "node build/dev-server.js"
        // "dev"就相當于需要在命令行執(zhí)行 npm run dev    所有我們執(zhí)行的npm run dev 相當于執(zhí)行了 "node build/dev-server.js"
        // 基本所有腳本命令 都需要 加上前綴 npm run ...  ,但是 "start" 這個腳本命令只需要執(zhí)行 npm start 就行,  不需要中間的 run;

        "dev": "node build/dev-server.js",
        "start": "npm run dev",
        "build": "node build/build.js"
      },
      "dependencies": {  //  生產(chǎn)環(huán)境所需要的依賴
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
        ......
      },
      "devDependencies": {  // 開發(fā)環(huán)境所需要的依賴
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        .......
      },
      "engines": {
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }

更多的文件配置可以參考 vue-cli#2.0 webpack 配置分析

希望能跟大家一起進步， O(∩_∩)O謝謝
github地址