vue.js學(xué)習(xí)之vue-cli定制腳手架詳解
前言
年初的時(shí)候公司的老后臺(tái)系統(tǒng)實(shí)在難以維護(hù)和繼續(xù)在其上開發(fā)了,因?yàn)檫@個(gè)系統(tǒng)被很多人寫過頁面,有前端有后端,編寫前端代碼時(shí)都非常隨意,加之沒有模塊化,復(fù)用性和可維護(hù)性都極低,便下定決定,重新搞一套。
經(jīng)過一段時(shí)間的調(diào)研選擇了vue全家桶+elementUI來開發(fā)后臺(tái)系統(tǒng),讓交互體驗(yàn)更好,讓開發(fā)體驗(yàn)更好,讓生產(chǎn)效率提高。
從零搭建其實(shí)考慮的事情還挺多的,比如:
- 如何管理代碼倉庫
- 開發(fā)環(huán)境,測(cè)試環(huán)境搭建
- 如何接入公司的打包上線流程
- 如何目錄劃分
- 如何劃分模塊
- 登錄和權(quán)限如何做
這篇文章來記錄下和腳手架相關(guān)的改造,首先其實(shí)就是上了vue-cli來做,可是呢?由于預(yù)計(jì)項(xiàng)目會(huì)有很多頁面,這些頁面其實(shí)是分模塊的,不同模塊的頁面之前其實(shí)關(guān)系不大。所以我覺得一個(gè)用戶其實(shí)大部分時(shí)候只會(huì)用到其中一個(gè)模塊的頁面,如果把所有頁面做成一個(gè)單頁應(yīng)用很多資源加載就不是很必要了,所以第一個(gè)改造就是:做成多入口打包,也就是做成多個(gè)單頁應(yīng)用,每個(gè)模塊一個(gè)入口。
/build/utils
exports.getEntries = function (globPath) {
var entries = {}
glob.sync(globPath).forEach(function (entry) {
var basename = path.basename(entry, path.extname(entry))
entries[basename] = entry
})
return entries
}
/build/webpack.base.conf
module.exports = {
entry: utils.getEntries('./src/modules/*/*.js'),
/build/webpack.dev.conf
/build/weback.prod.conf
var modules = utils.getEntries('./src/modules/*/*.html')
Object.keys(modules).forEach(function (moduleName) {
var config = {
filename: moduleName + '/index.html',
template: modules[moduleName],
inject: true,
excludeChunks: Object.keys(modules).filter(function (name) {
return name != moduleName
})
}
module.exports.plugins.push(new HtmlWebpackPlugin(config))
})
這樣就完成了多頁面的入口配置,其核心就是兩點(diǎn):1. 入口配置成數(shù)組。2. plugins里面添加多個(gè)HtmlWebpackPlugin分別對(duì)應(yīng)每一個(gè)頁面,完成js打包后路徑的自動(dòng)注入功能。
這里還有個(gè)地方需要注意,就是抽取公用的js和css代碼出來,這里做了一下改造,就是echarts指定提取出來,而不是按引用次數(shù)那種自動(dòng)提取, 這里還踩了個(gè)坑,詳細(xì)見注釋。
在webpack.prod.conf的plugins里面加入:
entry: {
vendor: ['vue', 'vue-router', 'vuex', 'element-ui'],
echarts: ['vue-echarts']
},
// 這個(gè)地方天坑啊~~~死人了。。。:(
// vendor是echarts的父模塊,順序不能反:https://github.com/webpack/webpack/issues/1943
// 包括聲明CommonsChunkPlugin的順序也是有關(guān)系的,不是隨意的,后聲明的是頂級(jí)模塊,先聲明的是依賴頂級(jí)模塊的模塊
// HtmlWebpackPlugin注入模塊鏈接的時(shí)候的順序也是由此保證的
new webpack.optimize.CommonsChunkPlugin({
names: ['echarts', 'vendor'],
minChunks: function (module, count) { // 抽取公用vendor.css
// console.log(module.resource)
return (
module.resource &&
/\.css$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- vue.js的手腳架vue-cli項(xiàng)目搭建的步驟
- 詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目
- vue.js之vue-cli腳手架的搭建詳解
- vue-cli入門之項(xiàng)目結(jié)構(gòu)分析
- Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹
- 深入理解Vue-cli搭建項(xiàng)目后的目錄結(jié)構(gòu)探秘
- 詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域
- 詳解vue-cli快速構(gòu)建項(xiàng)目以及引入bootstrap、jq
- 使用 vue.js 構(gòu)建大型單頁應(yīng)用
相關(guān)文章
elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能(兩種方法)
小編最近遇到這樣的需求,當(dāng)點(diǎn)擊一個(gè)按鈕可以變換里面字的內(nèi)容,剛開始還真是一頭霧水,不知所措。仔細(xì)想想屢屢思緒,很容易的解決了。接下來通過本文給大家介紹elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能,需要的朋友可以參考下2018-09-09
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定,幫大家解析神秘的Object.defineProperty方法2017-03-03
VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能詳解
這篇文章主要給大家介紹了關(guān)于VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能的相關(guān)資料,文中還給大家介紹了vue-print-nb使用中的常見問題,如空白頁,需要的朋友可以參考下2022-04-04
解決vue項(xiàng)目中遇到 Cannot find module ‘chalk‘ 報(bào)錯(cuò)的問題
這篇文章主要介紹了解決vue項(xiàng)目中遇到 Cannot find module ‘chalk‘ 報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11

