摘要:從使用和也是支持的。此處直接首頁其中當時,內的配置信息會直接覆蓋初始化后項目中的。文件接下來就是,這個文件負責的就是注入或是修改項目中文件。比如我的其中和就是用戶在處理中設定的問題的回答值。
vue-cli 之 Preset
vue-cli 插件開發指南
TLDR
背景介紹vue-cli 3 完全推翻了 vue-cli 2 的整體架構設計,所以當你需要給組里定制一份基于 vue-cli 的前端項目初始化模板時,就需要去思考:我該怎么做?
我們要做的事情很簡單,就是當別人使用 vue create xxx 命令初始化一個前端項目時,可以從 git repo 去拉取項目初始化信息,好處有兩點:
團隊內部所有的新項目都是統一的目錄結構和代碼組織方式,便于維護
后期可以開發公共插件服務于不同的項目,提高效率
因為 vue-cli 3 才出來不久,所以探索的過程中踩了很多坑,這里就來總結下。
整體設計vue-cli 官網介紹到:
你可以通過發布 git repo 將一個 preset 分享給其他開發者。這個 repo 應該包含以下文件:
preset.json: 包含 preset 數據的主要文件(必需)。
generator.js: 一個可以注入或是修改項目中文件的 Generator。
prompts.js: 一個可以通過命令行對話為 generator 收集選項的 prompts 文件。
# 從 GitHub repo 使用 preset vue create --preset username/repo my-project
GitLab 和 BitBucket 也是支持的。如果要從私有 repo 獲取,請確保使用 --clone 選項:
vue create --preset gitlab:username/repo --clone my-project vue create --preset bitbucket:username/repo --clone my-project
是不是看上去很簡單,起碼我在實踐過程中還是遇到了一些問題,接下來就重點講下。
git repo 參數
上面 --preset 后跟的參數 username/repo 實際是下圖中的紅框內部分(千萬別以為是 git clone 后的地址):
preset.json 文件
先說一點:當你直接用 vue create xxx 初始化項目時,如果你將初始化信息保存成一個本地模板后,會寫入到你系統的 ~/.vuerc 文件中。該文件中的內容其實就是我們接下來需要配置的 present.json。
此處直接 show code :
{ "useConfigFiles": true, "cssPreprocessor": "less", "plugins": { "@vue/cli-plugin-babel": { "version": "^3.0.0" }, "@vue/cli-plugin-eslint": { "version": "^3.0.0", "config": "recommended", "lintOn": ["save", "commit"] } }, "configs": { "vue": { "baseUrl": "/", "outputDir": "dist", "assetsDir": "static", "filenameHashing": true, "lintOnSave": true, "runtimeCompiler": false, "transpileDependencies": [], "productionSourceMap": false, "pages": { "index": { "entry": "src/main.js", "template": "public/index.html", "filename": "index.html", "title": "首頁", "chunks": ["chunk-vendors", "chunk-common", "index"] } }, "devServer": { "open": true, "host": "127.0.0.1", "https": false, "hotOnly": false, "proxy": null }, "pwa": {}, "pluginOptions": {} }, "postcss": {}, "eslintConfig": { } }, "router": true, "vuex": false, "routerHistoryMode": false }
其中當 "useConfigFiles": true 時, configs 內的配置信息會直接覆蓋初始化后項目中的 vue.config.js。
prompts.js 文件
prompts.js 其實就是你在初始化項目時,系統會詢問你的配置選項問題,比如你的項目需不需要安裝 vuex? 需不需要安裝 vue-router?
你的回答會直接影響后面初始化生成的項目文件。
這里最需要注意一點!!!
當你查看官方文檔時,第一眼看到就是下圖:
只要你這樣寫,就一定會 報錯 !!!
原因很簡單:上圖中 prompts.js 的寫法是開發基于 vue-cli-service 插件的代碼。而當你是要開發項目模板時,正確寫法如下:
module.exports = [ { name: "vuex", type: "confirm", message: `是否需要使用 vuex`, default: false }, { name: "elementUI", type: "confirm", message: `element-ui`, default: false } ];
這一點其實官網也有提到,只是很不容易注意到。
此處再給大家安利下 vue-cli-plugin-vuetify 這個開源插件中 prompts.js 的寫法。程序猿嘛,最愛的就是栗子。
generator.js 文件
接下來就是 generator.js,這個文件負責的就是 注入或是修改項目中文件。
同樣,我還是直接 show code :
module.exports = (api, options, rootOptions) => { // 安裝一些基礎公共庫 api.extendPackage({ dependencies: { "axios": "^0.18.0", "lodash": "^4.17.10", "keymirror": "^0.1.1" }, devDependencies: { "mockjs": "^1.0.1-beta3" } }); // 安裝 vuex if (options.vuex) { api.extendPackage({ dependencies: { vuex: "^3.0.1" } }); api.render("./template/vuex"); } // 安裝 element-ui 庫 if (options.elementUI) { api.extendPackage({ devDependencies: { "element-ui": "^2.4.6" } }); } // 公共基礎目錄和文件 api.render("./template/default"); // 配置文件 api.render({ "./.eslintrc.js" : "./template/_eslintrc.js", "./.gitignore" : "./template/_gitignore", "./.postcssrc.js" : "./template/_postcssrc.js" }); }
核心 api:
api.extendPackage : 負責給初始化項目中的 package.json 添加額外依賴并安裝;
api.render : 負責將模板項目中提前定義好的目錄和文件拷貝到初始化的項目中;
api.postProcessFiles : 負責具體處理模板項目中的文件,關于它可以參考 How to build your own vue-cli 3 plugin 和 GeneratorAPI.js 源碼
對于 api.render 需要注意幾點:
拷貝目錄的話,直接傳地址字符串,render 函數會將你所傳目錄內的所有文件覆蓋初始化項目中 src 目錄下的文件(我的測試結果是限于兩層目錄);
拷貝文件的話,直接傳入一個 object,其中 key 對應初始化項目中的目標位置,value 對應模板項目中的文件位置;
當你需要創建一個以 . 開頭的文件時,模板項目中需要用 _ 替代 .,這點官網有說明;
最后再說個很重要點,vue-cli 3 在拷貝文件時使用的是 EJS 模板去實現的,所以開發者是可以在任意文件中使用 EJS 語法去做更細粒度的控制。比如我的 main.js:
import Vue from "vue" import App from "./App.vue" <%_ if (options.vuex) { _%> import store from "./store" <%_ } _%> <%_ if (options.elementUI) { _%> import ElementUI from "element-ui"; Vue.use(ElementUI); <%_ } _%> // simulation data import "./mock/index"; Vue.config.productionTip = false new Vue({ router, <%_ if (options.vuex) { _%> store, <%_ } _%> render: h => h(App) }).$mount("#app")
其中 options.vuex 和 options.elementUI 就是用戶在處理 prompts.js 中設定的問題的回答值。正是基于這點,我沒有再去使用 api.postProcessFiles 這個 api 。
今天就寫到這里,后續有補充再寫~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/113952.html
摘要:從使用和也是支持的。此處直接首頁其中當時,內的配置信息會直接覆蓋初始化后項目中的。文件接下來就是,這個文件負責的就是注入或是修改項目中文件。比如我的其中和就是用戶在處理中設定的問題的回答值。 vue-cli 之 Preset vue-cli 插件開發指南 TLDR 背景介紹 vue-cli 3 完全推翻了 vue-cli 2 的整體架構設計,所以當你需要給組里定制一份基于 vue-cl...
摘要:從使用和也是支持的。此處直接首頁其中當時,內的配置信息會直接覆蓋初始化后項目中的。文件接下來就是,這個文件負責的就是注入或是修改項目中文件。比如我的其中和就是用戶在處理中設定的問題的回答值。 vue-cli 之 Preset vue-cli 插件開發指南 TLDR 背景介紹 vue-cli 3 完全推翻了 vue-cli 2 的整體架構設計,所以當你需要給組里定制一份基于 vue-cl...
摘要:借助,我們通過非常簡單的問答形式,方便地初始化一個工程,完全不需要擔心繁復的配置等等。簡單來說,就是不僅僅能初始化工程,理論上能夠初始化一切工程,包括,等等等等,只要你有一份能夠運行的模板,就能夠通過進行工程的初始化。 相信對于大部分使用過VueJS的同學來說,vue-cli是他們非常熟悉的一個工具。借助vue-cli,我們通過非常簡單的問答形式,方便地初始化一個vue工程,完全不需要...
摘要:在年年底的時候,同事聊起腳手架。由于公司業務的多樣性前端的靈活性讓我們不得不思考更通用的腳手架。針對開發使用的腳手架針對項目創建項目通用腳手架是一款強壯的且有一系列工具的通用型腳手架,但發布指定名稱,和用其開發工具。 在16年年底的時候,同事聊起腳手架。由于公司業務的多樣性,前端的靈活性,讓我們不得不思考更通用的腳手架。而不是伴隨著前端技術的發展,不斷的把時間花在配置上。于是chef-...
摘要:當你將一系列的特性選擇完畢后最后回提示你是否將已選項保存成一個快速將來可復用的當你選擇保存時,被保存的將會存在用戶的目錄下一個名為的文件里。 準備工作 npm install -g @vue/cli or yarn global add @vue/cli 安裝需要Node.js8.9以上版本,安裝完成后可以通過vue --version來驗證是否安裝成功 項目創建 vue create...
閱讀 2654·2023-04-26 00:07
閱讀 2437·2021-11-15 11:37
閱讀 649·2021-10-19 11:44
閱讀 2175·2021-09-22 15:56
閱讀 1730·2021-09-10 10:50
閱讀 1506·2021-08-18 10:21
閱讀 2572·2019-08-30 15:53
閱讀 1637·2019-08-30 11:11