前言
自總結(jié)完了上篇前端工程化的思想冲粤，并在vue全家桶的項目加以實踐忿族，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)vue項目，以及其中踩過的一個個坑塌计。伊脓。祷蝌。
基于vue-cli的自定義模板（Custom Templates）
小伙伴們的vue項目應(yīng)該都是用vue-cli初始化出來的棚蓄，但是vue-cli只是滿足了基礎(chǔ)配置和功能科平，如果你有額外的配置需求或者要迎合團(tuán)隊的業(yè)務(wù)配置，每新建個項目都得重新安裝額外配置奶是，比如說vuex坷随，sass温眉，封裝axios露懒，以及相關(guān)的文件夾。為了解決上述問題钦睡，vue-cli出了一個自定義模板功能象迎，你fork官方的模板下來然后進(jìn)行修改，然后用 vue-cli 來調(diào)用层坠。具體調(diào)用的場景有以下兩種
- 直接拉取git源：
當(dāng)你修改了模板并上傳了repo上，可執(zhí)行以下命令行來初始化
vue init username/repo my-project
- 拉取本地的模板：
當(dāng)你clone了官方模板在本地修改烦租，可執(zhí)行以下命令行來初始化
vue init ~/fs/path/to-custom-template my-project
還可以編寫meta.*（js,json）來選擇安裝哪些配置~
如果大家懶得去編寫vuex延赌，sass的配置，封裝axios的話叉橱，可以來通過我配置完的腳手架來初始化完項目~
vue init duosanglee/vuejs-custom-template
這個模板在repo里ps：我的這個模板的代碼風(fēng)格是基于standard的
引入sass全局變量挫以，mixin，function等
首先我們考慮下以下場景：當(dāng)使用rem開發(fā)移動端的時候窃祝，你定義了一個方法pxToRem的方法來實現(xiàn)px對rem的轉(zhuǎn)換掐松，然后在工程里為每個.vue文件@import 'public.scss'，得import很多很多很多次，萬一public.scss路徑變了的話大磺。抡句。「芾ⅲ哭都來不及待榔。
這時候sass-resources-loader就來拯救我們了，他可以省去重復(fù)性的引入流济，還支持LESS锐锣，POSTCSS等
具體用法如下：
- npm install -D sass-resources-loader
- 首先得找到項目里的build文件夾，找到util.js
添加一下代碼
function resolveResouce(name) {
return path.resolve(__dirname, '../src/style/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
// 'postcss-loader', 'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResouce('common.scss')]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
然后還是在當(dāng)前文件里找到
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
替換成
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
這樣就可以在項目里使用sass全局變量绳瘟，mixin雕憔，function了~~
在線 Mock 平臺 easy-mock
現(xiàn)在講都是前后端分離，前后端并行開發(fā)來提高開發(fā)效率稽荧，通過一個api文檔來協(xié)作橘茉，所以一個好的mock工具對于提高效率也至關(guān)重要~
這里極力推薦easy-mock工具，支持團(tuán)隊協(xié)作編輯姨丈，生成模擬數(shù)據(jù)的在線 mock 服務(wù)畅卓，還支持導(dǎo)入swagger文檔等功能,界面如下
定義全局變量
在項目會有需要使用全局變量的需求，來處理一些頻繁的操作蟋恬，大家都應(yīng)該會綁定到window對象上翁潘，但是這種方式不適合服務(wù)端渲染，因為服務(wù)端沒有 window 對象, 是 undefined, 當(dāng)試圖去訪問屬性時會報錯.我總結(jié)了兩個靠譜的方法
-
代理到Vue的原型對象
由于所有的組件都會從 Vue 的原型對象上繼承它們的方法, 因此我們只要
Object.defineProperty(Vue.prototype, '$xxx', { value: xxx });
就可以在所有組件/實例中通過 this.$xxx: 的方式訪問插件了而不需要定義全局變量或者手動的引入了
至于為什么要用Object.defineProperty這個方法歼争，是因為通過Object.defineProperty綁定的屬性是只讀的拜马，以防一起開發(fā)項目的協(xié)(zhu)作(dui)者(you)去重寫或者覆蓋該方法的值。
-
vuex大法
vuex的出現(xiàn)就是vue為了集中式存儲管理應(yīng)用的所有組件的狀態(tài)沐绒，所以說全局變量和方法都可以放到vuex當(dāng)中~具體用法就不加闡述了俩莽，大家可仔細(xì)閱讀vuex文檔
組件設(shè)計
大家都知道組件化的思想就是分治，幾乎任意類型的應(yīng)用程序界面乔遮，都可以抽象為一個組件樹扮超，那我們該按照什么規(guī)則把應(yīng)用抽象成組件，來應(yīng)對復(fù)雜多變的業(yè)務(wù)需求呢蹋肮。
我們從通信出刷、黑箱，繼承這幾個角度來看看
- 通信： vue的父子組件通信機制是props down坯辩，events up馁龟，盡量保持松耦合，一直保持單向數(shù)據(jù)流的特點漆魔，并加以強約束坷檩。需要注意的時候却音，盡可能減少跨組件通信，例如使用$parent淌喻，$root僧家。
- 繼承： 當(dāng)兩個組件存在些許的共性，又存在足夠的差異性的時候裸删，就可以用到vue的繼承---mixin八拱，他允許你封裝一塊在應(yīng)用的其他組件中都可以使用的函數(shù)。如果使用姿勢正確涯塔，他們不會改變函數(shù)作用域外部的任何東西肌稻。而且mixin還有各種高階用法拱烁，大家可自行查詢（我也不會）夕玩。
- 黑箱： 組件的黑箱狀態(tài)既只暴露易變的接口和方法禽篱，渲染給入的數(shù)據(jù)昂芜，組件內(nèi)部封裝不變的邏輯。
- 設(shè)計模式原則： 運用設(shè)計模式原則凌彬，比如單一職責(zé)原則变屁，將組件拆分抽離成更細(xì)粒度议惰，保證高內(nèi)聚性践惑；再如接口隔離原則腹泌，采用穩(wěn)定的服務(wù)端接口，將變化模塊分離尔觉，使得組件得以解耦凉袱；里氏替換原則、依賴倒置原則等等侦铜。
目錄結(jié)構(gòu)
-- src
-- assets # 私有資源
-- common # 通用組件
-- components # 業(yè)務(wù)組件
-- api.js # 請求文件
-- config # 環(huán)境變量配置
-- env.js # 環(huán)境變量文件
-- http.js # 封裝axios文件
-- pages # 頁面維度
-- pageA # 頁面A
-- pageA.vue # 頁面A單文件
-- pageA-components # 頁面A下的一個組件
-- children # 子頁面
-- router # 路由
-- index.js # 路由入口
-- routes.js # 路由配置信息
-- store # vuex
-- modules # vuex模塊
-- index.js # vuex入口
-- utils # js通用方法
-- app.vue # 頂層單文件
-- main.js # 入口
大家可以從目錄結(jié)構(gòu)中看出我整個項目分割的思維
首先我把組件分為通用組件和業(yè)務(wù)組件兩大類专甩。
通用組件是與業(yè)務(wù)耦合低，是有簡單狀態(tài)或者無狀態(tài)的钉稍，數(shù)據(jù)幾乎全部依賴于輸入涤躲，它只負(fù)責(zé)渲染給入的數(shù)據(jù)。比如按鈕是一個組件贡未，可能有一個參數(shù)決定了它的尺寸种樱，一個參數(shù)決定了它是否可以點擊，但是點擊這個按鈕之后會發(fā)生什么羞秤，就不是按鈕這個組件需要知道的事情了。
業(yè)務(wù)組件是與業(yè)務(wù)耦合高左敌，可以由多個通用組件和其他的業(yè)務(wù)組件組成瘾蛋，會擁有一些方法，用來修改持有的數(shù)據(jù)矫限，對內(nèi)來看哺哼，它自己持有一些數(shù)據(jù)和方法佩抹，用來決定內(nèi)容的渲染，對外又是一個簡單的props接受數(shù)據(jù)取董」髌唬可以理解為組件樹的非葉子節(jié)點，通過自身數(shù)據(jù)變化茵汰，進(jìn)而操縱子組件的內(nèi)容枢里。
然后config文件夾放置了環(huán)境變量文件env.js和封裝http庫文件http.js
env.js
http.js
然后我把路由里的routes.js和api.js請求文件都單獨抽離了出來。
自動生成雪碧圖
前端項目中自動生成雪碧圖節(jié)省了我們很多的時間蹂午，我們只要把圖片扔到文件夾里栏豺，webpack-spritesmith就能按照我們設(shè)定的規(guī)則自動合成css-sprite，安裝配置如下：
var SpritesmithPlugin = require('webpack-spritesmith');
...
module.exports = {
...
plugins: [
new SpritesmithPlugin({
src: {
cwd: './src/assets/sp/',
glob: '*.png'
},
target: {
image: './src/assets/sprite/sprite.png',
css: './src/assets/sprite/sprite.css'
},
apiOptions: {
cssImageRef: './sprite.png'
},
spritesmithOptions: {
algorithm: 'top-down',
padding: 100
}
})
]
}
自動修復(fù)eslint格式錯誤
這個功能的建立在小伙伴的開發(fā)工具是vscode情況下~
首先在vscode擴展里面安裝vscode的eslint插件豆胸，然后settings.json里添加如下配置
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
然后會在save文件的時候eslint插件自動根據(jù)項目下的.eslintrc來設(shè)置代碼格式~
sf不支持播放gif..具體效果大家只能自行查看
跨域
在瀏覽vue-cli的官方文檔時候發(fā)現(xiàn)了vue-cli自帶了API proxy奥洼，解決了在項目中后端聯(lián)調(diào)的時候的跨域問題。具體安裝配置如下：
首先我們找到config文件下的index.js,再找到dev對象下的proxyTable屬性晚胡，然后把以下代碼添加進(jìn)去
proxyTable: {
'/api': {
target: '網(wǎng)站名',
pathRewrite: {
'^/api': ''
}
}
}
然后重啟本地服務(wù)器灵奖，這樣你發(fā)送的/api/a就會代理發(fā)送到"網(wǎng)站名/a"了~
開發(fā)利器emmet
之所以稱emmet為前端開發(fā)利器是因為他可以根據(jù)我們所輸入的縮寫來得到相應(yīng)的內(nèi)容，大大節(jié)省我們的開發(fā)html和css的時間估盘，例：
- 輸入ul>li*2>span 按下擴展鍵
<ul>
<li><span></span></li>
<li><span></span></li>
</ul>
- 輸入m0-a-0-0+posa+bgc 按下擴展鍵
margin: 0 auto 0 0;
position: absolute;
background-color: #fff;
更多方法請看官方文檔emmet
這篇文章到此就已經(jīng)結(jié)束了感謝大家能夠關(guān)注此文章如果這篇文章能幫助到大家的話瓷患，麻煩請幫我點個贊~~~
大家有啥想法可在下面評論，也可以加我QQ：757592499來討論~
