首先我們為什么要創建腳手架？

為了解決我們在創建項目之中復雜的工作。

我們常用的腳手架有哪些？

React項目 => create-react-app

Vue.js項目 => vue-cli

Angular項目 => angular-cli

根據提供的信息，生成相應的文件與配置，服務于自身服務的項目。

Yeoman：通用型腳手架工具，根據一套模板生成對應的項目結構，這種類型的都比較靈活，容易闊還在那。

Plop：在項目開發過程中創建特定類型的文件。

我們主要來了解Yeoman腳手架工具：

• 基本使用

yarn global add yo //全局安裝Yo yarn global add generator-node //使用node環境 yo node //創建node基礎環境 如果出現錯誤 需要在環境變量的path項添加yarn的路徑，運行 yarn global bin找到路徑配置下即可

之后配置一些信息就完成了node環境的配置。

然后我們配置cli應用

yo node:cli

有了這些就可以將這個模塊作為全局的命令行模塊來使用了。

本地的模塊可以通過以下命令到全局范圍

yarn link //全局范圍

那么我們就可以通過模塊名字運行剛剛加進來的模塊：

n --help

Yeoman是通用型的腳手架工具，那么我們就總結一下使用Yeoman的步驟：

首先明確自己的需求

通過項目找到自己要使用的Generator

然后全局范圍內安裝找到的Generator

通過Yo運行對應的Generator

通過命令行交互填寫對應的配置選項

生成你所需要的項目結構

我們知道通過不同的Generator生成不同的項目，我們可以通過創建自己的Generator來生成自定義的項目結構。因為世面上的腳手架都是通用的，都是只有基本的骨架而不包含通用的業務代碼的，那我們接下來就創建一個的腳手架工具。

首先創建Generator就是創建一個NPM模塊，同時Generator有自己的目錄結構：

同時generator的名字必須是generator-<name>的格式

我們創建一個generator-li的文件夾

yarn init -y yarn add yeoman-generator //安裝這個生成器基類

我們試著寫一個簡單的生成器

上邊代碼寫完之后，我們需要把generator放入全局

yarn link

我們創建一個新的文件夾my-proj

yarn init yarn add yeoman-generator yo li

文件夾里生成一個temp.txt文件

那么我們根據模板創建文件

然后我們回到生成器的index文件

模板文件生成相對于手動創建每一個文件，模板的方式大大提高了效率，特別是大型的復雜項目。

另外我們可以通過讓用戶輸入的方式獲得變量，然后再writing的時候傳入變量：

首先我們先修改Generator的index文件

接著使用yo命令 使用生成器

yo li //調用generator-li生成器

那么我們再自定義一個帶有基礎代碼的 Vue.js腳手架。

首先先配置好vue vuex vue-router axios .... 放在模板里，

得到文件路徑數組：

yarn link //放入全局 yo vue224 //yo generator名字

那接下來，我們看下怎么發布Generator(npm模塊)

做之前，我們會將我們的源代碼先托管到公開的倉庫上邊

echo node_modules > .gitignore //先忽略node_modules目錄git init //初始化本地空倉庫 git status //看下倉庫狀態git add . git commit -m 'init generator' git remote add origin 遠端倉庫地址 git push -u origin masteryarn publish -registry=https://registry.yarnpkg.com//發布模塊 并指定鏡像

記著項目package.json 中的name一定不能重復

• 那我們現在說下簡單的腳手架工具--Plop

yarn add plop --dev

• 在項目根目錄新建plopfile.js文件，并且在plopfile.js文件中定義腳手架任務

• 編寫用于生成特定類型文件的模板

• 通過Plop提供的CLI運行腳手架任務

yarn plop component

下邊使用NodeJS 完成一個自定義的小型腳手架工具

mkdir my-cli cd my-cli code .

yarn init -y

在package.json中添加 bin屬性 "bin":"cli.js"

cli.js中必須以 #!/usr/bin/env node 開頭 mac電腦必須修改此文件的權限為755

加載與用戶交互的控件inquirer yarn add inquirer --dev 制定交互問題

新建一個templates模板目錄 創建模板文件 明確模板地址與模板轉換后的文件輸出地址

安裝模板引擎ejs yarn add ejs --dev 通過循環讀取file renderFile每個文件，寫入到新的文件夾里。

發布到npm中。

下章分享：

李先生：Grunt的介紹與使用?zhuanlan.zhihu.com

總結

以上是生活随笔為你收集整理的app.vue里使用data_Yeoman自定义Generator使用案例及Plop的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。