目錄
Vue 2.0的項目擴展
1.如何舒服地使用Atom
??安裝插件
??配置皮膚顏色
2.Vue項目引入組件庫
??引入方式
??支持ES2015
??Mint UI
??ElementUI
??iView
??Vonic
??MuseUI
3.Vue項目的調(diào)試工具
??vue-devtools
??移動端調(diào)試
????Chrome DevTools
????Safari Web Inspector
????Eruda
????spy-debuger
4.Vue項目官方依賴庫
??vue-loder
??vue-router
??Vuex
5.Vue項目第三方依賴庫
??ESlint
????ESlint規(guī)則摘要
????ESlint規(guī)則風格
????ESlint忽略文件
vue-loder
vue-loader 是Vue官方推出的 Webpack 的加載器拌蜘,它的作用是將 .vue 組件轉(zhuǎn)換為JavaScript 模塊你踩,作為Vue模塊開發(fā)的重要特性之一凰荚,vue-loader的引入是必須的。
在vue-cli提供的webpack邪码、webpack-simple浅萧、pwa模板中,默認引入了vue-loader。需要通過創(chuàng)建模板的方式來引入vue-loader贼穆,模板的創(chuàng)建方法見之前的Vue2.0安裝篇-創(chuàng)建
板塊
vue-router
vue-router 是官方為Vue深度定制的頁面路由,用于單頁面應用的開發(fā)兰粉,也是Vue模塊開發(fā)的重要特性故痊,但并不是必須引入的。
如果只是開發(fā)一些沒有關聯(lián)的單頁面玖姑,不需要在多個頁面中做頻繁跳轉(zhuǎn)愕秫,甚至都不需要在vue組件之間切換,那么不建議引入vue-router焰络,尤其是在移動端頁面體積有限的情況下戴甩。
在vue-cli提供的webpack和pwa模板的創(chuàng)建中,加入了引入選項闪彼,在這里輸入 Y
進行引入:
或者通過NPM安裝
// 在終端安裝
npm install vue-router
// 在 main.js 中引入 vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vuex
Vuex 是官方專為 Vue.js 應用程序的制定狀態(tài)管理模式等恐,它負責集中管理所有Vue組件的狀態(tài),并監(jiān)聽組件狀態(tài)的變化备蚓。
Vuex 能夠更好地幫助我們在組件外部管理組件狀態(tài)课蔬,并能配合vue-devtools做一些高級調(diào)試( time-travel、狀態(tài)快照導入導出)郊尝。Vuex的使用二跋,同時也會帶來繁瑣業(yè)務邏輯,所以一般在組件之間中需要做復雜通信的中大型的應用中流昏,才會考慮使用Vuex扎即,簡單的狀態(tài)管理通過中央事件總線(就是this.$emit的方式)就足以勝任。
NPM安裝
npm install vuex --save
Yarn安裝
yarn add vuex
引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)