Vue的使用總結和技巧

時間  2019-11-17
標籤 vue 使用 總結 技巧 简体版
原文   原文鏈接

這篇文章主要是宏觀總結，若是有哪部分知識須要另外單獨講解，根據留言會另外發布。javascript

Vue-router詳細講解css

歡迎來個人Vue技術羣交流：Vue887516034html

起步

固然是尤大的官網入手了,許多剛學框架的新手都喜歡從網上找視頻教程，例如慕課網這種，本人不建議這種學習方法，由於視頻的做者會讓你跟着他的思惟去寫一套他的風格的代碼，這是一個細思極恐的事情。vue

其實vuejs官網的東西是很是豐富的，而且我認爲須要加入瀏覽器書籤，是須要不間斷的重複看的，由於會更新新的文檔，不常常留意官網，可能就會漏掉新的語法糖，開發體驗應該是每一個開發者都須要的。java

項目的開始

建議直接上vue-cli腳手架，從一開始就進入模塊化編程的思想。node

雖然我也說不出什麼是模塊化編程，好像就是那麼回事吧。mysql

vue-cli@2+老掉牙的操做我就不提了，全局安裝腳手架，再用腳手架的cmd命令去拉取webpack模板。jquery

這裏提一下，能夠本身去官方的github去fork下來，而後本身定義一個喜歡的模板，好比加入vuex等等，具體操做自行搜索。webpack

我在上個禮拜也體驗了vue-cli@3.0，目前還沒正式發佈，不過已經可使用了，這個我也很少講了，我們掘金也有相關文章。ios

友情連接 vue.config.js相關配置 config.md

實操

一、Vue

vue的語法很少說了，無非就是template,script,style,建議根據尤大的語法規範去書寫。

eslint一個強制規範編碼的插件，不建議使用，常常出現莫名其妙的錯誤，公司內部能夠本身定義一套規範，而且文檔整理，也是個不錯的選擇。

--------------- 總結和技巧 -----------------

<template>
    <div :style="{color:$options.filters.txtToColor(msg)}"></div>
    <!-- 行內filter -->
</template>
複製代碼
import { txtToColor } from '/path/to/filters.js'
export default {
    name:'a',
    data(){
        return{
            msg:123,
            obj:{
                msg:321
            }
        }
    },
    filters:{
        txtToColor
    },
    watch:{
        'obj.msg'(newV,oldV){ //監聽對象裏的屬性
            
        }
    }
}
複製代碼
<style lang="less/sass/stylus...">
</style>
複製代碼

二、Vue-router

router第一次接觸這個詞的小萌新可能一臉懵逼，由於jquery已經寫習慣了。

由於vue是單頁面應用，router其實就是把之前的domain.com/a.html,domain.com/b.html多頁面整合爲多路徑管理多個模塊。

--------------- 總結和技巧 -----------------

//router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

const router = new Router({
    //此處能夠利用node環境變量來設置打包後項目放在服務器某個目錄後，路由的根路徑配置
    base: process.env.NODE_ENV==='development'?'/':'/some/dir/',
    //...routes
});
//不少人把beforeEach寫到main.js
router.beforeEach((from,to,next)=>{
    //...某些攔截操做，是否登陸權限等
    next()
});
export default router
複製代碼

每一層子路由，就須要多一層router-view，若是隻是但願瀏覽器的url做爲語義，可使用alias

//router.js
const router = new Router({
    routes:[
        {
            path:'/b',
            component:B,
            alias:'/a/c'//這樣當路徑爲/a/c時 頁面顯示爲B，router-view也會對應根路由
            //別名只能經過path跳轉
        },
        {
            path:'/a',
            component:A,
            children:[
                {
                    path:'c',//這裏要注意 空配置要寫在後面。
                    //由於路由匹配到規則後就不會繼續匹配了
                }
            ]
        }
    ]
})
複製代碼

路由懶加載

原理就是將須要懶加載的路由經過webpack分開打包，切換至對應路由時，纔開始加載js文件，能夠實現首頁加載速度，可是總體項目體積會變大。

//router.js
const router = new Router({
    routes:[
        {
            path:'/a',
            component:()=>import('path/to/A.vue')
        }
    ]
})
複製代碼
//package.json
"devDependencies":{
    //...
    "babel-plugin-syntax-dynamic-import": "^6.18.0"
    //...
}
複製代碼
//.babelrc
"plugins":["syntax-dynamic-import"]
複製代碼

三、Vuex

vuex一個狀態(數據)管理官方插件，高效管理全局數據，而且注入vue實例，讓全部組件能夠輕鬆讀寫全局數據，讓全部組件直接共享狀態完成通訊。

--------------- 總結和技巧 -----------------

//store.js
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from '/path/to/moduleA.js'
Vue.use(Vuex);

const store = new Vuex.Store({
    strict:process.env.NODE_ENV==="development",//開發環境開啓嚴格模式
    state:{
        test:666
    },
    getters:{
        
    },
    mutations:{
        testCommit(state,opt){
            
        }
    },
    actions:{
        testAction({commit}){
            
        }
    },
    modules:{
        moduleA
    }
})

複製代碼
//moduleA.js
export default {
    namespaced:true,//vuex模塊化 模塊名前綴
    state:{
        test:666
    },
    getters:{
        
    },
    mutations:{
        testCommit(state,opt){
            
        }
    },
    actions:{
        testAction({commit,state,rootState,rootGetter}){
            
        }
    }
}
複製代碼
//***.vue
import {mapState,mapAction,mapMutation} from 'vuex'
//將vuex的方法注入到組件中，使用更方便
export default {
    computed:{
        ...mapState('moduleA',{
            test1:'test'
        }),
        ...mapState({//vuex的根狀態
            test2:'test'
        })
    },
    method:{
        ...mapMutation('moduleA',{
            testCommit1:"testCommit"
        }),
        ...mapMutation({
            testCommit2:"testCommit"
        })
        ...mapAction('moduleA',{
            testAction1:"testAction"
        }),
        ...mapAction({
            testAction2:"testAction"
        })
    },
    mounted(){
        this.testCommit1();//===this.$store.commit('moduleA/testCommit')
        this.testCommit2();//===this.$store.commit('testCommit')
        this.testAction1();//===this.$store.dispatch('moduleA/testAction')
        this.testAction2();//===this.$store.dispatch('testAction')
    }
}
複製代碼

四、Components

這一段講一講父子組件那些事

假設手寫了個custom-btn組件,在父組件如何監聽這個子組件的點擊。這裏不講slot了

<!--parent.vue-->
<template>
    <custom-btn @click="some-fn"/>
</template>

<script> import custom-btn from 'path/to/custom-btn.vue'; export default{ components:{ custom-btn } } </script>
複製代碼
<!--custom-btn.vue-->
<template>
    <button @click="$emit('click')"></button>
</template>

<script> export default{ name:'custom-btn' } </script>
複製代碼

只有在子組件emit了click，在父組件才能響應click，這個click能夠自定義名字。 也能夠在emit時，攜帶參數，實現父子組件傳值。

router-link是個內置組件，因爲沒有emit，因此是不能響應click的，可是能夠經過@click.native來爲組件內的dom元素綁定click。

組件的緩存

一部分組件，包括路由，在業務需求上是須要緩存的，例如某個彈窗組件打開時，裏面有選項已經勾選了，須要臨時關閉彈窗可是又不但願再次打開從新渲染，這個時候就須要使用keep-alive

<template>
    <keep-alive>
        <custom-dialog></custom-dialog>
    </keep-alive>
</template>
複製代碼

這個時候組件已經不會從新渲染，內部的經常使用鉤子函數也不會執行，只有利用專用的2個鉤子去處理緩存的組件邏輯。

<!--custom-dialog.vue -->
<script> export default{ activated(){ //喚醒時 }, deactivated(){ //睡眠時 } } </script>
複製代碼

這個屬於小場景，固然也有可能出現大場景，就是某個路由頁面所有緩存下來，這裏就有丶東西了，由於路由的渲染都是在router-view,他是個動態的，同級的路由都會渲染在這個位置，這裏就要動態緩存了。

<template>
    <keep-alive :include="[]"><!-- 這個數組裏寫須要緩存路由的.vue文件的name -->
        <router-view />
    </keep-alive>
</template>
複製代碼

請保持每一個文件的name惟一

五、API

推薦你們能夠刷幾遍vue的api， 不少人看官方文檔會漏掉這一頁

六、Webpack

前面講到router的base能夠配置部署服務器後，非根目錄的狀況，一樣webpack也須要配置項目資源的根路徑

//config/index.js
module.exports = {
    build:{
        assetsPublicPath:'some/dir/'，
        productionSourceMap：false
        //打包不生成map文件，有效減少打包體積，而且別人看不到你的源碼
    }
}
複製代碼

默認的dev配置爲localhost:8080,能夠利用ip這個node包，讓同事能夠訪問你正在跑的項目

//config/index.js
const ip = require('ip').address();
//...
module.exports = {
    dev:{
        host: ip,
    }
}
複製代碼

這裏還涉及到一個配置，能夠經過代理進行跨域，僅限開發環境，生產環境能夠經過nginx實現，自行搜索。

//config/index.js
module.exports = {
    proxyTable:{
        '/api':{//當有/api/...路徑時，解析爲下面的域名
            target: 'https://domain.com',//代理此域名
            changeOrigin: true,
            pathRewrite: { //當前解析爲domain.com/api/...
              '^/api': '' //若有需求，能夠將api/去掉,此處爲domain.com/...
            }
      }
    }
}
複製代碼

scss拓展

less等其餘語言自行搜索

經過webpack實現.vue單文件可訪問全局scss變量,須要安裝sass-resources-loader包

// build/utils.js 60行左右
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
    //...
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname,'../src/assets/theme/index.scss')
        //這裏按照你的文件路徑填寫
        //這裏能夠理解爲將此文件的變量廣播全局,.vue文件可使用這個文件中的變量
        //多個文件能夠寫成數組
        //詳細文檔可看 https://github.com/shakacode/sass-resources-loader
      }
    }),
    //...
}
複製代碼

其他配置文件不建議修改,若是對webpack很是熟練，能夠隨意玩耍。

七、經常使用node包

  1. @tweenjs/tween.js 一個js動畫庫
  2. axios 支持promise的http庫
  3. qs 數據格式轉換插件，配合axios使用
  4. crypto-js 各類加密，沒什麼實際安全做用
  5. prismjs 語法高亮插件
  6. vue-lazyload 圖片懶加載，功能很全
  7. vue-meta 組件中動態修改head標籤裏面的內容
  8. babel-plugin-equire echarts按需加載插件，優化寫法，默認會攜帶指定版本的echarts，建議自行安裝須要的版本覆蓋
  9. webpack-bundle-analyzer 打包完成後顯示體積相關信息，能夠了解是否重複加載,哪些文件過大等

八、dev/build出現javascript out of memory解決方案

//package.json
"scripts": {
    "dev": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
    "build": "node --max_old_space_size=4096 build/build.js"
},
複製代碼

最後

其實這篇文章分享的東西並很少，由於我寫文章並無什麼準備，隨性寫寫，歡迎指正錯誤， 有不懂得能夠留言，會發布更詳細的講解。(感受本身很裝b啊，其實我也是菜鳥)

分享幾個連接

  1. 個人我的github:https://github.com/chavesgu,本身沒寫什麼牛逼的東西，可是能夠看看我star的東西
  2. 本身瞎寫的lavas項目:http://lavas.chavesgu.com
  3. 本身瞎寫的網站https://www.chavesgu.com,(vue+nodejs+mysql)

tips: 懂得分享，纔會走的愈來愈遠。

歡迎來個人Vue技術羣交流：Vue887516034

若是以爲對你有用，就打賞一下吧。

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