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