Vue學習筆記

時間  2019-11-05
標籤 vue 學習 筆記 简体版
原文   原文鏈接

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

1. 解決css背景圖片打包路徑錯誤的問題

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

  2. 把如下代碼進行更換css

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

    更換成html

    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath: '../../'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
  3. 打包就能夠看到效果咯!

2. Vue引入全局less變量

  1. 用vue-cli初始化的vue項目
  2. 再build文件夾下建立一個globalLessVars.js文件

  3. 在globalLessVars.js文件中 放入以下代碼前端

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

  4. 在utils.js 引入 globalLessVars.js文件vue

    const globalLessVars = require('./globalLessVars');
  5. 在static文件中建立 color.less 文件

  6. 在 color.less 文件中 放入以下代碼java

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

  7. 在util.js文件中以下解析 color.less 文件node

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

  8. 再把util.js 文件中 cssLoaders方法中返回值改爲如下代碼webpack

    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less', {
            globalVars: colorsLess
        }),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }
    大功告成

  9. 引用多個文件的話 就這能夠這樣ios

    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開發，使用less-loader，配置全局less變量

3. 去除vue項目中的 # --- History模式

export default new Router({
        mode: 'history',
        routes: [
           ...
        ]
    })
若是後臺沒給前端的 history 模式 匹配路徑的話， history 只適合在本地開發使用， 打包記得改回 hash 模式

4. 自定義路徑名

import HelloWorld from '@/components/HelloWorld' git

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

  2. 能夠前往 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')
        }
    }

5. 不符合規範致使eslint代碼檢測工具報錯

圖片描述

若是出現相似以上的錯誤 , 前往 build 文件下 webpack.base.conf.js 中註釋調 eslint-loader 這個loader 就好了

圖片描述

若是你不想使用eslint 代碼檢測 你能夠在用vue-cli直接在建立vue項目的時候就選擇不生成代碼檢測這個eslint-loader
圖片描述

6. 本地開發解決跨域請求的問題

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

    proxyTable: {}

    設置成

    proxyTable: {
        '/api': {
            target: 'http://www.mytest.com', //這裏放須要請求的接口
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    } 
    
    //  請求接口的時候 http://www.mytest.com/login  能夠寫成  /api/login

    能夠發起多個代理 (以下):

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

7. babel-polyfill 讓ie上使用新語法的內置對象和API

  1. npm i babel-polyfill --save 下載 babel-polyfill 模塊
  2. 在webpack.base.conf.js 中作如下修改
module.exports = {
        entry: {
          app: ['babel-polyfill', './src/main.js']
        },
        ......
    }

8. 前臺攔截器

通常在咱們請求後臺數據時,都會在請求過程當中執行動畫, 和統一管理請求錯誤,驗證TOKEN 等等的狀況;
當你使用 axios 作請求時, 你能夠作以下設置來解決以上問題

  1. npm i axios qs --save 來下載這兩個模塊
  2. 建立fetch.js 文件，內容以下：
import axios from 'axios'
    import qs from 'qs'  // 直接post請求後臺取不到參數,()

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

    //接收到後臺的數據時執行的方法
    axios.interceptors.response.use(response => response, err => Promise.resolve(err.response))


    //檢查狀態碼 status
    function checkStatus(res) {
        if (res.status === 200 || res.status === 304) { //當狀態正常是返回原樣的數據
            return res
        }
        return {  // 狀態不正常時能夠返回本身自定義的一些格式或者狀態什麼的
            ....
        }
    }

    //檢查後臺的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請求直接放參數， 爲什麼後臺接收不到前端的參數 axios發送post請求，springMVC接收不到數據問題

9. Vue數組更新, 卻沒法渲染問題

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

具體能夠參考這裏 變化檢測問題（數組相關）

10. 路由懶加載

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

11.自定義組件

  1. 先建立一個vue的 loading 結構

    loading.vue
    <template>
        <div class="loading-wrapper">
            <div class="aircle"></div>
        </div>
    </template>
    <style lang="less" scoped>
        .loading-wrapper {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0; top: 0;
            background: rgba(0, 0, 0, .5);
            .aircle {
                width: 300px;
                height: 300px;
                position: absolute;
                left:0;top:0;right:0;bottom:0;
                margin: auto;
                border-radius: 50%;
                background: linear-gradient(#000 50%, #fff 0%);
                display: flex;
                align-items: center;
                animation: rotate 2s linear infinite;
            }
    
            .aircle:after,
            .aircle:before {
                content: "";
                flex: 1;
                height: calc(100% / 6);
                border-radius: 50%;
                border: 50px solid #000;
                transform-origin: 0 50%;
                transform: scale(0.5);
                animation: change 1s ease-in-out infinite alternate;
            }
    
            .aircle:after {
                background: #000;
                border-color: #fff;
                transform-origin: 100% 50%;
                animation-delay: -1s;
            }
            .aircle:before {
                background: #fff;
            }
    
            @keyframes change {
                100% {
                    transform: scale(1.5);
                }
            }
    
            @keyframes rotate {
                100% {
                    transform: rotate(360deg);
                }
            }
        }
    </style>

    2.在建立一個JS 文件引入這個loading.vue

    index.js

    import Vue from 'vue'
    import LoadingComponent from './loading.vue'
    
    
    //extend 是構造一個組件的語法器.傳入參數，返回一個組件
    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.最後建立一個js文件統一掛載全部自定義組件到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);
    在別的組件中經過以下直接調用就好了 
    created () {
        this.$showLoading()
    
        setTimeout( () => {
            this.$hideLoading()
        }, 2000);

    }

12.路由之間的切換動畫

1.用transition元素來作動畫， 經過綁定name元素來切換不一樣的動畫

<div class="back" @click="$router.goBack()">返回</div
    <transition :name="transition">
        <router-view class="view" />
    </transition>

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.給路由添加返回的狀態

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

4.檢測路由的改變來切換狀態，

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;
            }
        }
    
    }

13.生命週期的鉤子函數

beforeCreate () {
        console.log('--------------beforeCreate-------------------')
        console.log('在實例建立以後同步調用。此時實例已經結束解析選項，這意味着已創建：數據綁定，計算屬性，方法，watcher/事件回')
        console.log('可是尚未開始 DOM 編譯，$el 還不存在,可是實例存在')
    },
    created () {
        console.log('--------------created-------------------')
        console.log('在實例建立完成後被當即調用,掛載階段還沒開始，$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 組件激活時調用')
    },
    deactivated () {
        console.log('--------------deactivated-------------------')
        console.log('keep-alive 組件停用時調用')
    },
    beforeDestroy () {
        console.log('--------------beforeDestroy-------------------')
        console.log('組件銷燬以前')
    },
    destroyed () {
        console.log('--------------destroyed-------------------')
        console.log('組件銷燬以後')
    }

14. 路由鉤子函數

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

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


    to: 即將要進入的目標 [路由對象]
    from: 當前導航正要離開的路由
    next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是confirmed （確認的）。
    next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from
    next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航

   


    //組件內的鉤子
    beforeRouteEnter (to, from, next) {
        // 在渲染該組件的對應路由被 confirm 前調用
        // 相對於組件來講的，並且應該是在路由進入以前開始準備的 因此beforeRouteEnter是調用ajax的時機
        // 不能獲取組件實例 `this`
        // 由於當鉤子執行前，組件實例還沒被建立

        next();
    },

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

15. 打包事項

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

    更改爲

    assetsPublicPath: './'

  3. 在構建生產環境版本時是否開啓source map

    productionSourceMap: true

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

16. 簡單文件介紹

.babelrc

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

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

        // 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置
        "env": {

            // test 是提早設置的環境變量，若是沒有設置BABEL_ENV則使用NODE_ENV，若是都沒有設置默認就是development
            "test": {
                "presets": ["env", "stage-2"],

                // instanbul是一個用來測試轉碼後代碼的工具
                "plugins": ["istanbul"]  
            }
        }
    }
.editorconfig

    charset = utf-8  //編碼
    indent_style = space //縮進風格,基於空格作縮進
    indent_size = 2   //縮進大小是2格
    end_of_line = lf   //換行符的風格
    insert_final_newline = true  //當你建立一個文件，會自動在文件末尾插入新行
    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"就至關於須要在命令行執行 npm run dev    全部咱們執行的npm run dev 至關於執行了 "node build/dev-server.js"
        // 基本全部腳本命令 都須要 加上前綴 npm run ...  ,可是 "start" 這個腳本命令只須要執行 npm start 就行,  不須要中間的 run;

        "dev": "node build/dev-server.js",
        "start": "npm run dev",
        "build": "node build/build.js"
      },
      "dependencies": {  //  生產環境所須要的依賴
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
        ......
      },
      "devDependencies": {  // 開發環境所須要的依賴
        "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地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程