{{title}}
{{body}}
資訊專欄INFORMATION COLUMN
摘要：如果沒有看過之前一篇博客的，或者對(duì)的腳手架沒有了解過的同學(xué)，推薦先看上一篇如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的腳手架。它是一個(gè)用來構(gòu)建靜態(tài)網(wǎng)站的類庫(kù)，也能夠用來對(duì)文件進(jìn)行處理。有任何問題歡迎進(jìn)行交流。
前言
在之前一篇博客介紹了關(guān)于Node腳手架的一些基礎(chǔ)的知識(shí)，這篇博客是在之前的基礎(chǔ)上針對(duì)在Node中開發(fā)腳手架中遇到的問題，如：
終端樣式、交互問題
文件處理問題
通過對(duì)Vue-cli 2.9.2的源碼進(jìn)行分析，解決相關(guān)問題。
如果沒有看過之前一篇博客的，或者對(duì)Node.js的腳手架沒有了解過的同學(xué)，推薦先看上一篇：如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Node.js腳手架。
正文 終端 怎么自定義終端的樣式chalk是一個(gè)日志的樣式庫(kù)，可以在終端上面調(diào)整日志的樣式。
以下的代碼：
const chalk = require("chalk");
console.log(chalk.red("hello world"));
轉(zhuǎn)換為具體樣式為：
通過說明文檔，我們可以知道，chalk可以支持文字顏色和背景顏色。
怎么實(shí)現(xiàn)終端中的Loading圖ora可以在終端實(shí)現(xiàn)Loading的效果，可以在與用戶進(jìn)行交互后使用。
從官網(wǎng)的實(shí)例來看，我們可以實(shí)現(xiàn)以下的效果：
怎么在終端中和用戶進(jìn)行交互在終端中和用戶進(jìn)行交互，獲取用戶輸入是一個(gè)很常見的需求。
Inquirer這個(gè)庫(kù)能夠通過終端讓我們和用戶進(jìn)行一些交互，比如下面的例子：
var inquirer = require("inquirer");
inquirer.prompt([{type: "confirm", name: "OK", message: "Are you OK?", default: false}]).then(answers => {
console.log(answers);
});
得到的結(jié)果內(nèi)容為：
文件相關(guān) 怎么能夠方便下載有目錄結(jié)構(gòu)的模板文件最常見的文件模板下載，都是通過將文件上傳到CDN中，然后再通過某個(gè)特定的格式下載到頁(yè)面上。
但是，如果你想要通過比較優(yōu)雅的方式來進(jìn)行文件下載，可以通過download-git-repo來下載你再Git上面已經(jīng)準(zhǔn)備好的模板，這樣就能夠在下載的過程中保證文件目錄和順序，比之前自己創(chuàng)建和檢測(cè)文件夾會(huì)簡(jiǎn)便很多。
怎么對(duì)下載的文件進(jìn)行處理當(dāng)你提供的模板不僅僅是一個(gè)純粹的文件，而是可以通過某些參數(shù)進(jìn)行編譯，得到不同的目標(biāo)文件時(shí)，你可以通過metalsmith來對(duì)文件進(jìn)行操作。
它是一個(gè)用來構(gòu)建靜態(tài)網(wǎng)站的類庫(kù)，也能夠用來對(duì)文件進(jìn)行處理。
你可以通過編寫一些處理的回調(diào)函數(shù)來對(duì)你的模板文件進(jìn)行處理。
怎么編譯模板語(yǔ)言如果你想要一套現(xiàn)成的模板編譯工具，可以使用現(xiàn)成的如Handlebars。
他能夠像后端模板語(yǔ)言一樣，直接針對(duì)類HTML文件進(jìn)行處理，我們可以看下官方的例子。
{{title}}
{{body}}
針對(duì)上述模板，在編譯時(shí)填入title和body兩個(gè)字段，即可得到完整的HTML片段。
在Vue-cli中，使用了模板引擎合并庫(kù)consolidate.js,通過這個(gè)庫(kù)的render方法來編寫metalsmith的處理函數(shù)，從而在渲染的過程中對(duì)模板進(jìn)行處理，具體代碼如下：
exports.handlebars.render = function(str, options, fn) {
return promisify(fn, function(fn) {
var engine = requires.handlebars || (requires.handlebars = require("handlebars"));
try {
for (var partial in options.partials) {
engine.registerPartial(partial, options.partials[partial]);
}
for (var helper in options.helpers) {
engine.registerHelper(helper, options.helpers[helper]);
}
var tmpl = cache(options) || cache(options, engine.compile(str, options));
fn(null, tmpl(options));
} catch (err) {
fn(err);
}
});
};
因此，他可以利用已經(jīng)安裝好的handlebar模板引擎來注冊(cè)helper，從而進(jìn)行模板的處理。
總結(jié)通過對(duì)Vue-cli源碼的簡(jiǎn)單學(xué)習(xí)，我們可以發(fā)現(xiàn)在日常中需要處理的與用戶交互、文件處理編譯等需求也有了一個(gè)比較好的解決方案。
當(dāng)然，上面提供的方案不是唯一的，僅提供給大家進(jìn)行一個(gè)參考和快速實(shí)現(xiàn)。大家也可以通過一些其他的方法來實(shí)現(xiàn)相同的功能。
有任何問題歡迎進(jìn)行交流。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107159.html
摘要：目標(biāo)開發(fā)一個(gè)簡(jiǎn)單的腳手架，能夠提供給用戶進(jìn)行安裝。在腳手架中使用腳本。具體用法如下具體展示效果如下對(duì)用戶文件進(jìn)行讀寫操作通過上面的步驟，我們已經(jīng)能夠完成一個(gè)簡(jiǎn)單的腳手架了。 原因 在工作中，需要開發(fā)一個(gè)腳手架，用于給相關(guān)用戶提供相關(guān)的開發(fā)便利性。 適合人群 對(duì)前端、Node操作有一定的了解，同時(shí)向了解腳手架開發(fā)過程或者需要自己實(shí)現(xiàn)一個(gè)腳手架的開發(fā)者。 目標(biāo) 開發(fā)一個(gè)簡(jiǎn)單的腳手架，能夠...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：哪吒社區(qū)技能樹打卡打卡貼函數(shù)式接口簡(jiǎn)介領(lǐng)域優(yōu)質(zhì)創(chuàng)作者哪吒公眾號(hào)作者架構(gòu)師奮斗者掃描主頁(yè)左側(cè)二維碼，加入群聊，一起學(xué)習(xí)一起進(jìn)步歡迎點(diǎn)贊收藏留言前情提要無意間聽到領(lǐng)導(dǎo)們的談話，現(xiàn)在公司的現(xiàn)狀是碼農(nóng)太多，但能獨(dú)立帶隊(duì)的人太少，簡(jiǎn)而言之，不缺干 ? 哪吒社區(qū)Java技能樹打卡?【打卡貼 day2...
閱讀 2284·2019-08-30 10:51
閱讀 842·2019-08-30 10:50
閱讀 1555·2019-08-30 10:49
閱讀 3214·2019-08-26 13:55
閱讀 1661·2019-08-26 11:39
閱讀 3470·2019-08-26 11:34
閱讀 2019·2019-08-23 18:30
閱讀 3437·2019-08-23 18:22
