欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年07月02日 09:40:46   作者:Zhang Xiao  
這篇文章主要給大家介紹了vue.js學(xué)習(xí)之vue-cli定制腳手架的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。

前言

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

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

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

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

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

/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里面添加多個HtmlWebpackPlugin分別對應(yīng)每一個頁面,完成js打包后路徑的自動注入功能。

這里還有個地方需要注意,就是抽取公用的js和css代碼出來,這里做了一下改造,就是echarts指定提取出來,而不是按引用次數(shù)那種自動提取, 這里還踩了個坑,詳細(xì)見注釋。

在webpack.prod.conf的plugins里面加入:

entry: { 
 vendor: ['vue', 'vue-router', 'vuex', 'element-ui'],
 echarts: ['vue-echarts']
 },

// 這個地方天坑啊~~~死人了。。。:(
 // vendor是echarts的父模塊,順序不能反:https://github.com/webpack/webpack/issues/1943
 // 包括聲明CommonsChunkPlugin的順序也是有關(guān)系的,不是隨意的,后聲明的是頂級模塊,先聲明的是依賴頂級模塊的模塊
 // HtmlWebpackPlugin注入模塊鏈接的時候的順序也是由此保證的
 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é)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

  • Vue3中的h函數(shù)及使用小結(jié)

    Vue3中的h函數(shù)及使用小結(jié)

    這篇文章主要介紹了Vue3中的h函數(shù)及使用小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • 詳解Vue3如何優(yōu)雅的加載大量圖片

    詳解Vue3如何優(yōu)雅的加載大量圖片

    最近開發(fā)了一個功能,頁面首頁會加載大量的圖片,初次進(jìn)入頁面時,會導(dǎo)致頁面性能下降,于是乎,我改進(jìn)了這個功能,可以讓所有圖片自動懶加載,文中有詳細(xì)的代碼示例,需要的朋友可以參考下
    2023-09-09
  • elementUI Vue 單個按鈕顯示和隱藏的變換功能(兩種方法)

    elementUI Vue 單個按鈕顯示和隱藏的變換功能(兩種方法)

    小編最近遇到這樣的需求,當(dāng)點(diǎn)擊一個按鈕可以變換里面字的內(nèi)容,剛開始還真是一頭霧水,不知所措。仔細(xì)想想屢屢思緒,很容易的解決了。接下來通過本文給大家介紹elementUI Vue 單個按鈕顯示和隱藏的變換功能,需要的朋友可以參考下
    2018-09-09
  • vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定

    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)打印功能詳解

    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 print.js打印支持Echarts圖表操作

    vue print.js打印支持Echarts圖表操作

    這篇文章主要介紹了vue print.js打印支持Echarts圖表操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 基于Vue+Echart繪制動態(tài)圖

    基于Vue+Echart繪制動態(tài)圖

    這篇文章主要給大家介紹了基于Vue+Echart的動態(tài)圖繪制,用戶需要展示他的數(shù)據(jù)庫是有哪個數(shù)據(jù)庫轉(zhuǎn)化的,需要展示數(shù)據(jù)庫的軌跡圖,前導(dǎo)庫的關(guān)系圖,文中有詳細(xì)的實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2023-10-10
  • VUE中的打包刪除文件、圖片的HASH碼

    VUE中的打包刪除文件、圖片的HASH碼

    這篇文章主要介紹了VUE中的打包刪除文件、圖片的HASH碼,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題

    解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題

    這篇文章主要介紹了解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • react和vue的事件處理差異詳解

    react和vue的事件處理差異詳解

    這篇文章主要介紹了react和vue的事件處理差異,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論