自定義建立簡易的Vue cli腳手架工具

本文章用於記錄腳手架學習

1.index.js為核心原始碼

2.templates.js為package.json模板;

3.package.json管理依賴包和命令列;

1.index.js原始碼

#!

/usr/bin/env node
// 命令列工具
const program =
require
('commander'
)// 快速轉殖指定版本的倉庫
const download =
require
('download-git-repo'
)// 模板引擎工具
const handlebars =
require
('handlebars'
)// 嚮導的方式採集使用者輸入的值
const inquirer =
require
('inquirer'
)// 檔案讀取和寫入
const fs =
require
('fs'
)// loading工具
const ora =
require
('ora'
)// 顯示樣式
const chalk =
require
('chalk'
)// 顯示圖示
const logsymbols =
require
('log-symbols'
)// 模板列表檔案,用於查詢當前腳手架有什麼模板的專案
const templates =
require
('./templates'
)program
.version
('0.1.0'
)// -v 或者 --version 的時候會輸出該版本號
program
.command
('init [project-name]').
description
('初始化專案模板').
action((
templatename, projectname
)=>
= templates[templatename]
download
(downloadurl, projectname,,(
err)
=>
spinner.
succeed()
// 使用嚮導的方式採集使用者輸入的值
inquirer.
prompt([
,,])
.then((
answers
)=>
/package.json
`        const packagecontent = fs.
readfilesync
(packagepath,
'utf8'
)// 使用模板引擎把使用者輸入的資料解析到 package.json 檔案中
const packageresult = handlebars.
compile
(packagecontent)
(answers)
// 解析完畢，把解析之後的結果重新寫入 package.json 檔案中
fs.writefilesync
(packagepath, packageresult)
console.
log(logsymbols.success, chalk.
yellow
('初始化模板成功'))
})})
})program
.command
('list').
description
('檢視所有可用模板').
action((
)=>$`
)}})
if(!process.ar**.
slice(2
).length)
program.
parse
(process.ar**)

module.exports =

,'tpl-b':,
'tpl-c'
:}

,"bundledependencies"

:false
,"dependencies":,
"deprecated"
:false
,"description":""
,"keywords":[
],"license"
:"isc"
,"name"
:"itcast-cli"
,"scripts":,
"version"
:"1.0.1"
}

webfe create 模板名 專案名

我們配置的命令不僅可以用來指定版本的模板然後轉殖專案至本地,還可以使用指令建立vue專案中的元件並自動生成路由檔案和說明檔案等等…

Ubuntu，centos開機啟動自定義指令碼，命令

本例子，主要，開機建立opt test檔案。1 進入etc init.d 2 設定執行許可權 sudo chmod x etc init.d test.sh 3 將etc init.d test.sh 字段追加到 etc rc.d rc.local 4.在centos7中,etc rc.d rc.l...

vue cli 自定義配置全域性元件

在components資料夾load中新建loading.vue和loading.js兩個檔案，vue檔案用來寫公共元件，js用來匯出這個元件 在loading.js中，規定了使用這個元件的名字，以及使用方法 import loading from loading.vue const loading...

用dedecms自定義表單建立簡易自助預約系統

建站往往需要根據客戶的需求來增加相應的功能，比如預約。平時用比較多的是織夢系統，那麼如何用dedecms自定義表單建立簡易自助預約系統呢？進入dedecms後台，左側選單中依次點選 核心 頻道型別 自定義表單 增加新的自定義表單 點選後進入設定模版介面，這裡可以不用動直接點選確定。當然名字那裡可以修...