目錄
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忽略文件
為了快速地搭建頁面戏蔑，你應該盡可能多地使用現(xiàn)成的Vue組件趣兄，如果有特殊的界面定制，也建議在現(xiàn)有組件庫的基礎上做封裝，直到你具備足夠的能力自己寫組件办绝。
目前有這些比較不錯的組件庫：Mint UI、ElementUI、Vonic、iView去枷、MuseUI、VUWE是复、RadonUI、Vue Antd淑廊、N3、Vuikit蒋纬、VUX猎荠、vue-impression、Framework7
下面的截圖是筆者最開始接觸Vue組件庫時蜀备，抽取的六個組件庫做的對比：
可以看出iView和ElementUI是針對桌面端的組件庫关摇，并且具備很齊全的組件，而MintUI是針對移動端的組件庫碾阁。
但并不是說移動端開發(fā)不能引用桌面端的組件输虱，實際開發(fā)中是可以按需引入多個組件庫的，筆者是MintUI+iView脂凶。移動端的開發(fā)為了優(yōu)化性能宪睹，一定要按需引入，也叫部分引入蚕钦、局部引入亭病。下面會講到怎么按需引入。
引入方式
npm安裝
推薦使用 npm 的方式安裝嘶居，它能和 webpack 打包工具配合使用罪帖，方便管理。
組件庫的部分引入的方式只能通過npm進行邮屁，CDN不能實現(xiàn)部分引入
// 進入項目目錄
cd desktop/project
// 安裝插件并保存到package.json的dependencies（默認）
cnpm install mint-ui --save // 相當于 cnpm install mint-ui -S cnpm 和 cnpm i mint-ui -S
// or 安裝插件并保存到package.json的devDependencies
cnpm install mint-ui --save-dev // 相當于 cnpm install mint-ui -D 和 cnpm i mint-ui -D
// 卸載dependencies插件
cnpm uninstall mint-ui --save
// 卸載devDependencies插件
cnpm uninstall mint-ui --save-dev
CDN引入
<!-- 引入Vue -->
<script src="https://vuejs.org/js/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
支持ES2015
為了性能著想整袁，移動端開發(fā)一定要采用部分引入的方式組件庫。
通過部分引入的方式佑吝，引入組件庫之前坐昙，必須要支持ES2015，否則會報錯芋忿。下面截圖是Mint-UI的部分引入要求的配置：
NPM引入
npm install babel-preset-es2015 -D
Mint UI
MintUI是由餓了么前端團隊推出的移動端組件庫炸客，簡潔、輕量級戈钢，正因為輕量級所以也缺少一些組件嚷量，在實際開發(fā)中，還需要引入第二套組件庫作為補充逆趣，比如桌面端的iView或ElementUI
npm安裝
npm i mint-ui -S
完整引入
// 在 main.js 中寫入以下內(nèi)容
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
按需引入
// 需要先安裝插件 babel-plugin-component
npm install babel-plugin-component -D
// 將 .babelrc 修改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
// 在 main.js 中寫入以下內(nèi)容
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
new Vue({
el: '#app',
components: { App }
})
CDN
目前可以通過 unpkg.com/mint-ui 獲取到最新版本的資源蝶溶，在頁面上引入 js 和 css 文件即可開始使用
<!-- 引入Vue -->
<script src="http://vuejs.org/js/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
關于事件綁定
在 Vue 2.0 中，為自定義組件綁定原生事件必須使用 .native 修飾符：
<my-component @click.native="handleClick">Click Me</my-component>
從易用性的角度出發(fā)宣渗，MintUI對 Button 組件進行了處理，使它可以監(jiān)聽 click 事件：
<mt-button @click="handleButtonClick">Click Me</mt-button>
但是對于其他組件田轧，還是需要添加 .native 修飾符傻粘。
ElementUI
ElementUI也是由餓了么前端團隊推出的組件庫，針對桌面端做的組件庫窒典，是Vue開發(fā)者使用最多的桌面端組件庫稽莉。盡管使用數(shù)量最多，但我感覺iView比ElementUI做得更好一些劈猪。
npm安裝
npm i element-ui -S
完整引入
// 在 main.js 中寫入以下內(nèi)容
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
components: { App }
})
按需引入
// 需要先安裝插件 babel-plugin-component
npm install babel-plugin-component -D
// 將 .babelrc 修改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
// 在 main.js 中寫入以下內(nèi)容
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
new Vue({
el: '#app',
components: { App }
})
CDN
目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源战得，在頁面上引入 js 和 css 文件即可開始使用
<!-- 引入Vue -->
<script src="http://vuejs.org/js/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
iView
iView是由 TalkingData推出的面向桌面端贡避、后臺業(yè)務的組件庫刮吧，筆者使用感受掖蛤，覺得它比ElementUI更強大蚓庭，無論是文檔質(zhì)量器赞、demo質(zhì)量、組件數(shù)量方面请契，同時配有腳手架iView Cli爽锥，雖然ElementUI也有推出腳手架氯夷，但iView的腳手架封裝了可視化操作界面腮考，這一點還是比較人性化的。
iView組件庫的結(jié)構(gòu)如下：
下圖iView與Element的依賴庫對比棚放，可以看出iView的封裝更為高效席吴、簡潔：
npm安裝
npm i iview -S
完整引入
// 在 main.js 中寫入以下內(nèi)容
import Vue from 'vue'
import App from './App.vue'
import 'iview/dist/styles/iview.css' // 使用 CSS
import iView from 'iview'
Vue.use(iView)
new Vue({
el: '#app',
components: { App }
})
按需引入
// 需要先安裝插件 babel 或 babel-core
npm install babel -D
// 修改webpack配置文件webpack.conf.js為：
module: {
rules: [
{ test: /iview.src.*?js$/, loader: 'babel' },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]
}
// 在 main.js 中寫入以下內(nèi)容
import Vue from 'vue'
import {Checkbox, Button} from 'iview/src/components/checkbox'
import 'iview/dist/styles/iview.css' // 使用 CSS
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Checkbox.name, Checkbox)
new Vue({
el: '#app',
components: { App }
})
CDN
目前可以通過 unpkg.com/iview 獲取到最新版本的資源柬姚，在頁面上引入 js 和 css 文件即可開始使用
<!-- 引入Vue -->
<script src="http://vuejs.org/js/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="http://unpkg.com/iview/dist/iview.min.js"></script>
組件使用規(guī)范
使用:prop傳遞數(shù)據(jù)格式為 數(shù)字搬设、布爾值或函數(shù)時撕捍，必須帶:(兼容String除外，具體看組件文檔)默色，比如：
// 正確的使用方法：
<Page :current="1" :total="100"></Page>
// 錯誤的使用方法：
<Page current="1" total="100"></Page>
Vonic
適用于移動端簡單頁面腿宰，因為不支持npm安裝
依賴
vonic 依賴以下幾個庫吃度，在調(diào)用 vonic 之前椿每，要確保已經(jīng)引入
- vue.js
- vue-router.js
- axios.js (axios是Vue官方推薦的 ajax 替代方案)
CDN
目前可以通過 unpkg.com/vonic 獲取到最新版本的資源英遭，在頁面上引入 js 和 css 文件即可開始使用
<!-- 定制版 圖標 樣式 -->
<link rel="stylesheet" >
<!-- 依賴庫 axios/vue/vue-router -->
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>
<!-- vonic庫 -->
<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>
MuseUI
適用于移動端和桌面端贪绘，對應于Vue 1.0版本的叫vue-carbon
依賴
// 引入到index.html的<head>中
<link rel="stylesheet" >
<link rel="stylesheet" >
npm安裝
npm i muse-ui -S
完整引入
// 在 main.js 中寫入以下內(nèi)容
import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)
new Vue({
el: '#app',
components: { App }
})
按需引入
// 需要先安裝插件 babel-plugin-component
npm install babel-plugin-component -D
//將 webpack.base.conf.js 修改為：
{
// ...
rules: {
loaders: [
// ...
{
test: /muse-ui.src.*?js$/,
loader: 'babel-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
less: [
'vue-style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
globalVars: {
museUiTheme: `'${museUiThemePath}'`,
}
}
}
]
}
}
}
]
},
resolve: {
// ...
alias: {
'muse-components': 'muse-ui/src'
}
}
}
// 在 main.js 中寫入以下內(nèi)容
import Vue from 'vue'
import 'muse-components/styles/base.less' // 加載基礎的樣式
import {appBar, avatar} from 'muse-components/appBar'
Vue.component(appBar.name, appBar)
Vue.component(avatar.name, avatar)
new Vue({
el: '#app',
components: { App }
})
CDN
目前可以通過 unpkg.com/muse-ui 獲取到最新版本的資源均函，在頁面上引入 js 和 css 文件即可開始使用
<!-- 引入Vue -->
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/muse-ui@2.1.0/dist/muse-ui.js"></script>
