腳手架 用Plop工具生成專案中的元件

2021-10-10 23:36:47 字數 650 閱讀 9625

專案**:

plop是乙個小工具,它提供了一種簡單的方法用一致的方式生成**或任何其他型別的檔案。

比如在專案中,每個元件的初始化檔案內容基本一致,則可用plop來生成元件,避免每次手動生成的繁瑣。

yarn add plop --dev
export default () =>
.}
// plop 入口檔案,需匯出乙個函式

// 此函式接收乙個plop物件,用於建立生成器任務

module.exports = plop =>

],actions: [

}/name.js',

templatefile: 'plop-templates/component.hbs'

},}/name.css',

templatefile: 'plop-templates/component.css.hbs'}]

})}

建立乙個新元件,執行:

yarn plop component
執行完成後,則可以在專案 src/components 目錄下看到生成的元件檔案。

本文 完。

小型前端腳手架工具plop的簡單使用

在我之前的另一篇文章前端工程化 通過yeoman generator將檔案載入到本地中說到了如何通過yeoman將檔案載入到本地,但實際上使用plop工具也可以 首先要將plop安裝到全域性環境 npm i plop g再將plop安裝到當前專案中 npm i plop d然後要在專案根目錄中新建乙...

用Angular腳手架搭建專案

首先你得安裝好node和npm的環境。接著用命令 npm install g angular cli 這個命令可以安裝最新版 然後用ng version命令檢驗是否成功 你可以選擇在你想要新建專案的資料夾下開啟命令列視窗輸入下面這個命令ng new your project name 最後專案建立成...

yeoman web腳手架工具

yeoman上搭建了很多各種專案需求的基礎腳手架,在專案開發的時候,可以直接利用這些現有的腳手架,免去了環境依賴配置的環節。npm install g yo把yeoman的模組yo,g安裝在全域性下。安裝之後可以輸入 yo version檢視yeoman的版本號 到yeoman官網查詢到需要的專案生...