建站
咨詢
售后
建站咨詢
新聞中心
核心概念
系統(tǒng)里有兩個主要的部分：
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、通州網(wǎng)絡(luò)推廣、微信小程序開發(fā)、通州網(wǎng)絡(luò)營銷、通州企業(yè)策劃、通州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供通州建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
- @Vue/cli：全局安裝的，暴露 vue create
命令； - @vue/cli-service：局部安裝，暴露 vue-cli-service 命令。
兩者皆應(yīng)用了基于插件的架構(gòu)。
Creator
Creator 是調(diào)用 vue create
Service
Service 是調(diào)用 vue-cli-service
CLI 插件
CLI 插件是一個可以為 @vue/cli 項(xiàng)目添加額外特性的 npm 包。它應(yīng)該始終包含一個 Service 插件作為其主要導(dǎo)出，且可選的包含一個 Generator 和一個 Prompt 文件。
一個典型的 CLI 插件的目錄結(jié)構(gòu)看起來是這樣的：
.
├── README.md
├── generator.js # generator (可選)
├── prompts.js # prompt 文件 (可選)
├── index.js # service 插件
└── package.json
Service 插件
Service 插件會在一個 Service 實(shí)例被創(chuàng)建時自動加載——比如每次 vue-cli-service 命令在項(xiàng)目中被調(diào)用時。
注意我們這里討論的“service 插件”的概念要比發(fā)布為一個 npm 包的“CLI 插件”的要更窄。前者涉及一個會被 @vue/cli-service 在初始化時加載的模塊，也經(jīng)常是后者的一部分。
此外，@vue/cli-service 的內(nèi)建命令和配置模塊也是全部以 service 插件實(shí)現(xiàn)的。
一個 service 插件應(yīng)該導(dǎo)出一個函數(shù)，這個函數(shù)接受兩個參數(shù)：
- 一個 PluginAPI 實(shí)例
- 一個包含 vue.config.js 內(nèi)指定的項(xiàng)目本地選項(xiàng)的對象，或者在 package.json 內(nèi)的 vue 字段。
這個 API 允許 service 插件針對不同的環(huán)境擴(kuò)展/修改內(nèi)部的 webpack 配置，并向 vue-cli-service 注入額外的命令。例如：
module.exports = (api, projectOptions) => {
api.chainWebpack(webpackConfig => {
// 通過 webpack-chain 修改 webpack 配置
})
api.configureWebpack(webpackConfig => {
// 修改 webpack 配置
// 或返回通過 webpack-merge 合并的配置對象
})
api.registerCommand('test', args => {
// 注冊 `vue-cli-service test`
})
}
為命令指定模式
注意：插件設(shè)置模式的方式從 beta.10 開始已經(jīng)改變了。
如果一個已注冊的插件命令需要運(yùn)行在特定的默認(rèn)模式下，則該插件需要通過 module.exports.defaultModes 以 { [commandName]: mode } 的形式來暴露：
module.exports = api => {
api.registerCommand('build', () => {
// ...
})
}
module.exports.defaultModes = {
build: 'production'
}
這是因?yàn)槲覀冃枰诩虞d環(huán)境變量之前知道該命令的預(yù)期模式，所以需要提前加載用戶選項(xiàng)/應(yīng)用插件。
在插件中解析 webpack 配置
一個插件可以通過調(diào)用 api.resolveWebpackConfig() 取回解析好的 webpack 配置。每次調(diào)用都會新生成一個 webpack 配置用來在需要時進(jìn)一步修改。
module.exports = api => {
api.registerCommand('my-build', args => {
const configA = api.resolveWebpackConfig()
const configB = api.resolveWebpackConfig()
// 針對不同的目的修改 `configA` 和 `configB`...
})
}
// 請確保為正確的環(huán)境變量指定默認(rèn)模式
module.exports.defaultModes = {
'my-build': 'production'
}
或者，一個插件也可以通過調(diào)用 api.resolveChainableWebpackConfig() 獲得一個新生成的鏈?zhǔn)脚渲茫?/p>
api.registerCommand('my-build', args => {
const configA = api.resolveChainableWebpackConfig()
const configB = api.resolveChainableWebpackConfig()
// 針對不同的目的鏈?zhǔn)叫薷?`configA` 和 `configB`...
const finalConfigA = configA.toConfig()
const finalConfigB = configB.toConfig()
})
第三方插件的自定義選項(xiàng)
vue.config.js 的導(dǎo)出將會通過一個 schema 的驗(yàn)證以避免筆誤和錯誤的配置值。然而，一個第三方插件仍然允許用戶通過 pluginOptions 字段配置其行為。例如，對于下面的 vue.config.js：
module.exports = {
pluginOptions: {
foo: { /* ... */ }
}
}
該第三方插件可以讀取 projectOptions.pluginOptions.foo 來做條件式的決定配置。
Generator
一個發(fā)布為 npm 包的 CLI 插件可以包含一個 generator.js 或 generator/index.js 文件。插件內(nèi)的 generator 將會在兩種場景下被調(diào)用：
- 在一個項(xiàng)目的初始化創(chuàng)建過程中，如果 CLI 插件作為項(xiàng)目創(chuàng)建 preset 的一部分被安裝。
- 插件在項(xiàng)目創(chuàng)建好之后通過 vue invoke 獨(dú)立調(diào)用時被安裝。
這里的 GeneratorAPI 允許一個 generator 向 package.json 注入額外的依賴或字段，并向項(xiàng)目中添加文件。
一個 generator 應(yīng)該導(dǎo)出一個函數(shù)，這個函數(shù)接收三個參數(shù)：
- 一個 GeneratorAPI 實(shí)例：
- 這個插件的 generator 選項(xiàng)。這些選項(xiàng)會在項(xiàng)目創(chuàng)建對話過程中被解析，或從一個保存在 ~/.vuerc 中的 preset 中加載。例如，如果保存好的 ~/.vuerc 像如下的這樣：{ "presets" : { "foo": { "plugins": { "@vue/cli-plugin-foo": { "option": "bar" } } } } } 如果用戶使用 preset foo 創(chuàng)建了一個項(xiàng)目，那么 @vue/cli-plugin-foo 的 generator 就會收到 { option: 'bar' } 作為第二個參數(shù)。對于一個第三方插件來說，該選項(xiàng)將會解析自對話或用戶執(zhí)行 vue invoke 時的命令行參數(shù)中 (詳見第三方插件的對話)。
- 整個 preset (presets.foo) 將會作為第三個參數(shù)傳入。
示例：
module.exports = (api, options, rootOptions) => {
// 修改 `package.json` 里的字段
api.extendPackage({
scripts: {
test: 'vue-cli-service test'
}
})
// 復(fù)制并用 ejs 渲染 `./template` 內(nèi)所有的文件
api.render('./template')
if (options.foo) {
// 有條件地生成文件
}
}
Generator 的模板處理
當(dāng)你調(diào)用 api.render('./template') 時，該 generator 將會使用 EJS 渲染 ./template 中的文件 (相對于 generator 中的文件路徑進(jìn)行解析)
此外，你可以使用 YAML 前置元信息繼承并替換已有的模板文件的一部分：
---
extend: '@vue/cli-service/generator/template/src/App.vue'
replace: !!js/regexp /
你也可以完成多處替換，當(dāng)然你需要將要替換的字符串用 <%# REPLACE %> 和 <%# END_REPLACE %> 塊包裹起來：
---
extend: '@vue/cli-service/generator/template/src/App.vue'
replace:
- !!js/regexp /歡迎來到你的 Vue\.js 應(yīng)用/
- !!js/regexp /
<%# END_REPLACE %>
文件名的極端情況
如果你想要渲染一個以點(diǎn)開頭的模板文件 (例如 .env)，則需要遵循一個特殊的命名約定，因?yàn)橐渣c(diǎn)開頭的文件會在插件發(fā)布到 npm 的時候被忽略：
# 以點(diǎn)開頭的模板需要使用下劃線取代那個點(diǎn)：
/generator/template/_env
# 調(diào)用 api.render('./template') 會在項(xiàng)目目錄中渲染成為：
.env
同時這也意味著當(dāng)你想渲染以下劃線開頭的文件時，同樣需要遵循一個特殊的命名約定：
# 這種模板需要使用兩個下劃線來取代單個下劃線：
/generator/template/__variables.scss
# 調(diào)用 api.render('./template') 會在項(xiàng)目目錄中渲染成為：
_variables.scss
Prompts
內(nèi)建插件的對話
只有內(nèi)建插件可以定制創(chuàng)建新項(xiàng)目時的初始化對話，且這些對話模塊放置在 @vue/cli 包的內(nèi)部。
一個對話模塊應(yīng)該導(dǎo)出一個函數(shù)，這個函數(shù)接收一個 PromptModuleAPI 實(shí)例。這些對話的底層使用 inquirer 進(jìn)行展示：
module.exports = api => {
// 一個特性對象應(yīng)該是一個有效的 inquirer 選擇對象
api.injectFeature({
name: 'Some great feature',
value: 'my-feature'
})
// injectPrompt 期望接收一個有效的 inquirer 對話對象
api.injectPrompt({
name: 'someFlag',
// 確認(rèn)對話只在用戶已經(jīng)選取了特性的時候展示
when: answers => answers.features.include('my-feature'),
message: 'Do you want to turn on flag foo?',
type: 'confirm'
})
// 當(dāng)所有的對話都完成之后，將你的插件注入到
// 即將傳遞給 Generator 的 options 中
api.onPromptComplete((answers, options) => {
if (answers.features.includes('my-feature')) {
options.plugins['vue-cli-plugin-my-feature'] = {
someFlag: answers.someFlag
}
}
})
}
第三方插件的對話
第三方插件通常會在一個項(xiàng)目創(chuàng)建完畢后被手動安裝，且用戶將會通過調(diào)用 vue invoke 來初始化這個插件。如果這個插件在其根目錄包含一個 prompts.js，那么它將會用在該插件被初始化調(diào)用的時候。這個文件應(yīng)該導(dǎo)出一個用于 Inquirer.js 的問題的數(shù)組。這些被解析的答案對象會作為選項(xiàng)被傳遞給插件的 generator。
或者，用戶可以通過在命令行傳遞選項(xiàng)來跳過對話直接初始化插件，比如：
vue invoke my-plugin --mode awesome
發(fā)布插件
為了讓一個 CLI 插件能夠被其它開發(fā)者使用，你必須遵循 vue-cli-plugin-
- 被 @vue/cli-service 發(fā)現(xiàn)；
- 被其它開發(fā)者搜索到；
- 通過 vue add
或 vue invoke 安裝下來。
開發(fā)核心插件的注意事項(xiàng)
注意
這個章節(jié)只用于 vuejs/vue-cli 倉庫內(nèi)部的內(nèi)建插件工作。
一個帶有為本倉庫注入額外依賴的 generator 的插件 (比如 chai 會通過 @vue/cli-plugin-unit-mocha/generator/index.js 被注入) 應(yīng)該將這些依賴列入其自身的 devDependencies 字段。這會確保：
- 這個包始終存在于該倉庫的根 node_modules 中，因此我們不必在每次測試的時候重新安裝它們。
- yarn.lock 會保持其一致性，因此 CI 程序可以更好地利用緩存。
新聞標(biāo)題：創(chuàng)新互聯(lián)VueCLI教程：VueCLI插件開發(fā)指南
當(dāng)前地址：http://www.dlmjj.cn/article/dpdeegs.html
