摘要:自定義自己的模板在使用的過程中,常用的模板只為我們提供最基礎的內容,但每次需要新建一個項目的時候就需要把之前項目的一些配置都搬過來,這樣就造成挺大的不方便,如果是作為一個團隊,那么維護一個通用的模板,我認為是挺有必要的。
自定義自己的vue-cli模板
在使用vue-cli的過程中,常用的webpack模板只為我們提供最基礎的內容,但每次需要新建一個項目的時候就需要把之前項目的一些配置都搬過來,這樣就造成挺大的不方便,如果是作為一個團隊,那么維護一個通用的模板,我認為是挺有必要的。
例如下面是我常用構建項目的目錄。
src ├─api //接口 ├─assets //圖片 ├─components //公用組件 ├─css //樣式 主要是scss ├─js //第三方以及工具類 ├─page //頁面 ├─router //路由 └─store //vuex
下面說下怎么自定義自己的vue-cli模板
fork一個自己的模板從 https://github.com/vuejs-templates/webpack fork 一個庫,再提交自己的修改到【自己的分支】,因為我們大部分內容還是在這個基礎上做修改的。
關于vue-cli的源碼分析可以參考下這個文章從vue-cli源碼學習如何寫模板
vuejs-templates/webpack目錄如下,
│ .gitignore │ circle.yml │ deploy-docs.sh │ LICENSE │ meta.js //該文件必須導出為一個對象, 用于定義模板的 meta 信息 │ package.json │ README.md │ test.sh ├─docs // 一些介紹該模板一些模塊的文檔 └─template //模板的內容 D:work odetestwebpack>meta.js
meta.js 主要是定義模板的一些配置, 目前可定義的字段如下:
prompts
filters
completeMessage
complete
helpers
prompts有用過vue-cli的同學應該有看過下面的這個圖
看下 prompts的代碼
"prompts": { "name": { //項目名 "type": "string", "required": true, "message": "Project name" }, "description": { "type": "string", "required": false, "message": "Project description", "default": "A Vue.js project" }, "author": { "type": "string", "message": "Author" }, "router": { "type": "confirm", "message": "Install vue-router?" }, ... }
所有的用戶輸入完成之后, template 目錄下的所有文件將會用 Handlebars(了解相關的語法點這里) 進行渲染. 用戶輸入的數(shù)據(jù)會作為模板渲染時的使用數(shù)據(jù),例如,在cmd確認使用router后,那么main.js就會import router,main.js中源碼:
{{#router}} import router from "./router"{{#if_eq lintConfig "airbnb"}};{{/if_eq}} //類似 {{#if_eq lintConfig "airbnb"}};{{/if_eq}}是啟用lint后一些語法的檢查 {{/router}}
因為開發(fā)常用到vuex,我們可以加入vuex,修改meta.js
"vuex":{ "type": "confirm", "message": "Install vuex?" },
安裝過程中,就會詢問是否安裝vuex了
helper上面的if_eq,還有源碼中的unless_eq是原本vue cli中注冊的那個輔助函數(shù),在vue-cli中的generate.js:
# vue-cli/lib/generate.js //... // register handlebars helper Handlebars.registerHelper("if_eq", function (a, b, opts) { return a === b ? opts.fn(this) : opts.inverse(this) }) Handlebars.registerHelper("unless_eq", function (a, b, opts) { return a === b ? opts.inverse(this) : opts.fn(this) })
類似的,你也可以自定義一些函數(shù),方便你自己去處理一些數(shù)據(jù),在meta.js中helpers對象中可以加入自己的方法,如源碼中就有注冊一個if_or的方法,你在文件中就可以用{{#if_or a b}}{{/if_or}}去使用
"helpers": { "if_or": function (v1, v2, options) { if (v1 || v2) { return options.fn(this); } return options.inverse(this); } },filters
filters 是根據(jù)條件過濾文件,源碼:
"filters": { ".eslintrc.js": "lint", ".eslintignore": "lint", "config/test.env.js": "unit || e2e", "test/unit/**/*": "unit", "build/webpack.test.conf.js": "unit", "test/e2e/**/*": "e2e", "src/router/**/*": "router" //例如上面的 router 為true的時候,就會加入這個目錄 },
同樣,這里我可以加入自己的vuex目錄,當,vuex為true的時候,會導入這個目錄
"filters": { ".eslintrc.js": "lint", ".eslintignore": "lint", "config/test.env.js": "unit || e2e", "test/unit/**/*": "unit", "build/webpack.test.conf.js": "unit", "test/e2e/**/*": "e2e", "src/store/**/*": "vuex", //加入自己的目錄 "src/router/**/*": "router" },
然后在main.js引入vuex
{{#vuex}} //vuex為true的時候就會寫入這些 import Vuex from "vuex"{{#if_eq lintConfig "airbnb"}};{{/if_eq}} import store from "./store/store"{{#if_eq lintConfig "airbnb"}};{{/if_eq}} Vue.use(Vuex){{#if_eq lintConfig "airbnb"}};{{/if_eq}} {{/vuex}} //store.js 文件是我寫vuex的入口 new Vue({ el: "#app", {{#router}} router, {{/router}} {{#vuex}} store, {{/vuex}} {{#if_eq build "runtime"}} render: h => h(App){{#if_eq lintConfig "airbnb"}},{{/if_eq}} {{/if_eq}} {{#if_eq build "standalone"}} template: "", components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}} {{/if_eq}} }){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
還有在template/package.json中也要加入vuex
"dependencies": { "vue": "^2.5.2"{{#router}}, "vue-router": "^3.0.1"{{/router}}{{#vuex}}, "vuex": "^2.1.1"{{/vuex}} },
后續(xù)的話只需要將自己需要的文件跟文件夾,加入到template/src,例如,我這里加入一個詢問是否是移動端的,是移動端的話,會引入 lib-flexible.js 以及相關配置的scss文件
"isMobile":{ "type": "confirm", "message": "is Mobile project?" },
最后,提交到github自己的分支上,就可以使用了
vue init jamielhf/webpack#template1 namegithub地址
https://github.com/jamielhf/webpack/tree/template1
參考:vue-cli webpack的配置詳解
從vue-cli源碼學習如何寫模板
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51528.html
摘要:自定義自己的模板在使用的過程中,常用的模板只為我們提供最基礎的內容,但每次需要新建一個項目的時候就需要把之前項目的一些配置都搬過來,這樣就造成挺大的不方便,如果是作為一個團隊,那么維護一個通用的模板,我認為是挺有必要的。 自定義自己的vue-cli模板 在使用vue-cli的過程中,常用的webpack模板只為我們提供最基礎的內容,但每次需要新建一個項目的時候就需要把之前項目的一些配置...
摘要:前言前段時間看了一些的源碼,收獲頗深。介紹是一款非常優(yōu)秀的用于迅速構建基于的應用工具。不影響閱讀源碼,直接忽略掉。引入的包發(fā)送請求的工具。自定義工具用于詢問開發(fā)者。 前言 前段時間看了一些vue-cli的源碼,收獲頗深。本想找個時間更新一篇文章,但是最近事情比較多,沒有時間去整理這些東西。趁這兩天閑了下來,便整理了一下,然后跟大家分享一下。如果小伙伴們讀完之后,跟我一樣收獲很多的話,還...
摘要:以下也將以進行展開說明。這個鍵值來自于在命令行界面與用戶交互的操作結果。鍵名對應的值為命令行交互中得到的數(shù)據(jù)。關于項目模板的開發(fā)涉及到的問題差不多就介紹完了,為自己或團隊開發(fā)一份專屬的吧原文深度定制團隊自己的 眾所周知,使用 vue-cli 可以快速初始化一個基于 Vue.js 的項目,官方提供了 webpack、pwa、browserify-simple 等常用 templates。...
摘要:借助,我們通過非常簡單的問答形式,方便地初始化一個工程,完全不需要擔心繁復的配置等等。簡單來說,就是不僅僅能初始化工程,理論上能夠初始化一切工程,包括,等等等等,只要你有一份能夠運行的模板,就能夠通過進行工程的初始化。 相信對于大部分使用過VueJS的同學來說,vue-cli是他們非常熟悉的一個工具。借助vue-cli,我們通過非常簡單的問答形式,方便地初始化一個vue工程,完全不需要...
閱讀 4083·2023-04-26 01:48
閱讀 3258·2021-10-13 09:40
閱讀 1739·2021-09-26 09:55
閱讀 3613·2021-08-12 13:23
閱讀 1780·2021-07-25 21:37
閱讀 3432·2019-08-30 15:53
閱讀 1393·2019-08-29 14:16
閱讀 1397·2019-08-29 12:59