快捷導(dǎo)航

vue.js學(xué)習(xí)之vue-cli定制腳手架詳解

更新時(shí)間：2017年07月02日 09:40:46 作者：Zhang Xiao

這篇文章主要給大家介紹了vue.js學(xué)習(xí)之vue-cli定制腳手架的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。

前言

年初的時(shí)候公司的老后臺(tái)系統(tǒng)實(shí)在難以維護(hù)和繼續(xù)在其上開發(fā)了，因?yàn)檫@個(gè)系統(tǒng)被很多人寫過頁(yè)面，有前端有后端，編寫前端代碼時(shí)都非常隨意，加之沒有模塊化，復(fù)用性和可維護(hù)性都極低，便下定決定，重新搞一套。

經(jīng)過一段時(shí)間的調(diào)研選擇了vue全家桶+elementUI來開發(fā)后臺(tái)系統(tǒng)，讓交互體驗(yàn)更好，讓開發(fā)體驗(yàn)更好，讓生產(chǎn)效率提高。

從零搭建其實(shí)考慮的事情還挺多的，比如：

如何管理代碼倉(cāng)庫(kù)
開發(fā)環(huán)境，測(cè)試環(huán)境搭建
如何接入公司的打包上線流程
如何目錄劃分
如何劃分模塊
登錄和權(quán)限如何做

這篇文章來記錄下和腳手架相關(guān)的改造，首先其實(shí)就是上了vue-cli來做，可是呢？由于預(yù)計(jì)項(xiàng)目會(huì)有很多頁(yè)面，這些頁(yè)面其實(shí)是分模塊的，不同模塊的頁(yè)面之前其實(shí)關(guān)系不大。所以我覺得一個(gè)用戶其實(shí)大部分時(shí)候只會(huì)用到其中一個(gè)模塊的頁(yè)面，如果把所有頁(yè)面做成一個(gè)單頁(yè)應(yīng)用很多資源加載就不是很必要了，所以第一個(gè)改造就是：做成多入口打包，也就是做成多個(gè)單頁(yè)應(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))
})

這樣就完成了多頁(yè)面的入口配置，其核心就是兩點(diǎn)：1. 入口配置成數(shù)組。2. plugins里面添加多個(gè)HtmlWebpackPlugin分別對(duì)應(yīng)每一個(gè)頁(yè)面，完成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ì)腳本之家的支持。

您可能感興趣的文章: