資訊專欄INFORMATION COLUMN
摘要：自定義自己的模板在使用的過程中，常用的模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置都搬過來，這樣就造成挺大的不方便，如果是作為一個(gè)團(tuán)隊(duì)，那么維護(hù)一個(gè)通用的模板，我認(rèn)為是挺有必要的。
自定義自己的vue-cli模板
在使用vue-cli的過程中，常用的webpack模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置都搬過來，這樣就造成挺大的不方便，如果是作為一個(gè)團(tuán)隊(duì)，那么維護(hù)一個(gè)通用的模板，我認(rèn)為是挺有必要的。
例如下面是我常用構(gòu)建項(xiàng)目的目錄。
src ├─api //接口 ├─assets //圖片 ├─components //公用組件 ├─css //樣式 主要是scss ├─js //第三方以及工具類 ├─page //頁面 ├─router //路由 └─store //vuex
下面說下怎么自定義自己的vue-cli模板
fork一個(gè)自己的模板從 https://github.com/vuejs-templates/webpack fork 一個(gè)庫，再提交自己的修改到【自己的分支】，因?yàn)槲覀兇蟛糠謨?nèi)容還是在這個(gè)基礎(chǔ)上做修改的。
關(guān)于vue-cli的源碼分析可以參考下這個(gè)文章從vue-cli源碼學(xué)習(xí)如何寫模板
vuejs-templates/webpack目錄如下，
│ .gitignore │ circle.yml │ deploy-docs.sh │ LICENSE │ meta.js //該文件必須導(dǎo)出為一個(gè)對(duì)象, 用于定義模板的 meta 信息 │ package.json │ README.md │ test.sh ├─docs // 一些介紹該模板一些模塊的文檔 └─template //模板的內(nèi)容 D:work odetestwebpack>meta.js
meta.js 主要是定義模板的一些配置, 目前可定義的字段如下:
prompts
filters
completeMessage
complete
helpers
prompts有用過vue-cli的同學(xué)應(yīng)該有看過下面的這個(gè)圖
看下 prompts的代碼
"prompts": {
"name": { //項(xiàng)目名
"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 目錄下的所有文件將會(huì)用 Handlebars（了解相關(guān)的語法點(diǎn)這里） 進(jìn)行渲染. 用戶輸入的數(shù)據(jù)會(huì)作為模板渲染時(shí)的使用數(shù)據(jù),例如，在cmd確認(rèn)使用router后，那么main.js就會(huì)import router，main.js中源碼：
{{#router}}
import router from "./router"{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
//類似 {{#if_eq lintConfig "airbnb"}};{{/if_eq}}是啟用lint后一些語法的檢查
{{/router}}
因?yàn)殚_發(fā)常用到vuex，我們可以加入vuex，修改meta.js
"vuex":{
"type": "confirm",
"message": "Install vuex?"
},
安裝過程中，就會(huì)詢問是否安裝vuex了
helper上面的if_eq，還有源碼中的unless_eq是原本vue cli中注冊(cè)的那個(gè)輔助函數(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對(duì)象中可以加入自己的方法，如源碼中就有注冊(cè)一個(gè)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的時(shí)候，就會(huì)加入這個(gè)目錄
},
同樣，這里我可以加入自己的vuex目錄，當(dāng)，vuex為true的時(shí)候，會(huì)導(dǎo)入這個(gè)目錄
"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的時(shí)候就會(huì)寫入這些
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: "
還有在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，例如,我這里加入一個(gè)詢問是否是移動(dòng)端的，是移動(dòng)端的話，會(huì)引入 lib-flexible.js 以及相關(guān)配置的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源碼學(xué)習(xí)如何寫模板
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/89895.html
摘要：自定義自己的模板在使用的過程中，常用的模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置都搬過來，這樣就造成挺大的不方便，如果是作為一個(gè)團(tuán)隊(duì)，那么維護(hù)一個(gè)通用的模板，我認(rèn)為是挺有必要的。 自定義自己的vue-cli模板 在使用vue-cli的過程中，常用的webpack模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置...
摘要：前言前段時(shí)間看了一些的源碼，收獲頗深。介紹是一款非常優(yōu)秀的用于迅速構(gòu)建基于的應(yīng)用工具。不影響閱讀源碼，直接忽略掉。引入的包發(fā)送請(qǐng)求的工具。自定義工具用于詢問開發(fā)者。 前言 前段時(shí)間看了一些vue-cli的源碼，收獲頗深。本想找個(gè)時(shí)間更新一篇文章，但是最近事情比較多，沒有時(shí)間去整理這些東西。趁這兩天閑了下來，便整理了一下，然后跟大家分享一下。如果小伙伴們讀完之后，跟我一樣收獲很多的話，還...
摘要：以下也將以進(jìn)行展開說明。這個(gè)鍵值來自于在命令行界面與用戶交互的操作結(jié)果。鍵名對(duì)應(yīng)的值為命令行交互中得到的數(shù)據(jù)。關(guān)于項(xiàng)目模板的開發(fā)涉及到的問題差不多就介紹完了，為自己或團(tuán)隊(duì)開發(fā)一份專屬的吧原文深度定制團(tuán)隊(duì)自己的 眾所周知，使用 vue-cli 可以快速初始化一個(gè)基于 Vue.js 的項(xiàng)目，官方提供了 webpack、pwa、browserify-simple 等常用 templates。...
摘要：借助，我們通過非常簡單的問答形式，方便地初始化一個(gè)工程，完全不需要擔(dān)心繁復(fù)的配置等等。簡單來說，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運(yùn)行的模板，就能夠通過進(jìn)行工程的初始化。 相信對(duì)于大部分使用過VueJS的同學(xué)來說，vue-cli是他們非常熟悉的一個(gè)工具。借助vue-cli，我們通過非常簡單的問答形式，方便地初始化一個(gè)vue工程，完全不需要...
閱讀 1636·2021-11-02 14:42
閱讀 2407·2021-10-11 10:58
閱讀 731·2021-09-26 09:46
閱讀 2967·2021-09-08 09:35
閱讀 1497·2021-08-24 10:01
閱讀 1285·2019-08-30 15:54
閱讀 3664·2019-08-30 15:44
閱讀 1850·2019-08-30 10:49
