深入理解vue cli

9.8學習總結之深入學習vue-cli

首先vue-cli有以下三個元件

參考資料：

cli(@vue/cli)是乙個全域性安裝的npm包，提供vue相關命令；

建立專案命令：vue init 如：vue init webpack project-name

在生成的專案裡面會有package.json檔案，開啟檔案，看到有vue、vue-init、vue-list、vue-build命令

'bin':

vue-init命令在bin目錄下的vue-init,接著看vue-init檔案，在vue-init中引入了眾多模組，而vue-init主要作用就是根據指定模板生成專案原型。

var template = program.args[0]//獲取模板名稱
var hasslash = template.indexof('/') > -1
var rawname = program.args[1]//獲取專案名稱
var inplace = !rawname || rawname === '.'
var name = inplace ? path.relative('../', process.cwd()) : rawname
var to = path.resolve(rawname || '.')//即將生成的專案路徑，如果已存在則會輸出警告，讓使用者確認是否繼續
var tmp = path.join(home, '.vue-templates', template.replace(/\//g, '-'))
if (program.offline) `)
template = tmp
}

module.exports = function generate (name, src, dest, done) )//將資訊聯合在乙個data裡面
opts.helpers && object.keys(opts.helpers).map(function (key) )
var helpers = 
if (opts.metalsmith && typeof opts.metalsmith.before === 'function') 
// 一次使用askquestions, filterfiles, rendertemplatefiles處理讀取的內容
// askquestions是會在終端裡詢問一些問題
// 名稱 描述 作者 是要什麼構建 在meta.js 的opts.prompts當中
// filterfiles 是用來過濾檔案
// rendertemplatefiles 是乙個渲染外掛程式
metalsmith.use(askquestions(opts.prompts))
.use(filterfiles(opts.filters))
.use(rendertemplatefiles(opts.skipinterpolation))
if (typeof opts.metalsmith === 'function') else if (opts.metalsmith && typeof opts.metalsmith.after === 'function') 
// 將處理後的檔案輸出
metalsmith.clean(false)
.source('.') // start from template root instead of `./src` which is metalsmith's default for `source`
.destination(dest)
.build(function (err, files) 
opts.complete(data, helpers)
} else 
})return data
}

生成專案的過程主要有以下幾個階段：

初步獲取配置（getoptions）-->讀取模板內容（metalsmith(path.join(src,'template'))）-->獲取自定義配置（metalsmitn.use(askquestions(opts.prompts))）-->filterfiles通過獲得的配置過濾檔案（use(filterfiles(opts.filters))）-->渲染模板（use(rendertemplatefiles(opts skipinterpolation))）-->輸出到指定目錄（destination（dest））

1.getoptions主要是讀取模板下的meta.js或meta.json，meta.json是必須檔案，為cli提供多種資訊，例如自定義的helper，自定義選項，檔案過濾規則等等。

2.通過metalsmith讀取模板內容，需要注意的是，此時的模板內容還是未被處理的；

3.獲取自定義配置：主要是通過async和inquire的配合完成手機使用者自定義配置；

4.filterfiles:對檔案進行過濾，通過minimatch進行檔案匹配

5.渲染模板：通過consolidate.js配合handlebars渲染檔案。

6.輸出：直接輸出

vue-list主要用於拉取vuejs-templates的模板資訊並輸出

vue-build則是通過乙份webpack配置將專案跑起來，如果是入口僅是乙個.vue元件，就使用預設的default-entry.es6載入元件並渲染。

在乙個vue cli專案中，@vue/cli-service安裝了乙個名為vue-cli-service 的命令。在專案預設的package.json中有如下配置：

可以通過npm run serve或者yarn serve啟用serve服務，vue-cli-service serve命令會啟動乙個基於webpack-dev-server的伺服器，並附帶模組熱載入；

cli外掛程式是向vue專案中提供可選功能的npm包，vue-cli外掛程式以@veu-cli-plugin-(內建外掛程式)或vue-cli-plugin-（社群外掛程式）開頭，當在專案內部執行vue-cli-server命令時，它會自動解析並載入package.json中列出的所有cli外掛程式。

深入理解vue cli

深入理解C語言深入理解指標

mysql 索引深入理解深入理解MySql的索引

深入理解C語言深入理解指標

深入理解vue cli

深入理解C語言 深入理解指標

mysql 索引深入理解 深入理解MySql的索引

深入理解C語言 深入理解指標

相關推薦

深入理解C語言深入理解指標

mysql 索引深入理解深入理解MySql的索引

深入理解C語言深入理解指標