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

在我之前的另一篇文章前端工程化 通過yeoman-generator將檔案載入到本地中說到了如何通過yeoman將檔案載入到本地，但實際上使用plop工具也可以

首先要將plop安裝到全域性環境

npm i plop -g

npm i plop -d

這裡和使用yeomen一樣先建立乙個plop-temp資料夾來存放模板檔案

module.

exports
= plop=>],
actions:
[}.js'
,// 新增的檔案的路徑
templatefile:
'plop-temp/temp.js'
// 模板檔案的路徑}]})}

在temp.js中隨便寫入點東西

let data =

1

輸入test，在根目錄生成了乙個test.js檔案，開啟test.js檔案，裡面的內容和temp.js的內容是一樣的

如果我們要將命令列填入的內容寫到檔案裡，可以通過在檔案內寫入}，}內寫入對應問題的變數就可以了，比如我們在temp.js裡寫入

let title =

"}"

let title =

"test"

module.

exports
= plop=>],
actions:
[}1.js'
,// 新增的檔案的路徑
templatefile:
'plop-temp/temp.js'
// 模板檔案的路徑},
}2.js'
,            templatefile:
'plop-temp/temp.js'},
]})}

如果要將生成的檔案放入乙個新建的資料夾，只要在放入的路徑寫入乙個沒有的資料夾名稱，就會先生成乙個新的資料夾，再將生成的檔案放入

module.

exports
= plop=>],
actions:
[}.js'
,// 新增的檔案的路徑
templatefile:
'plop-temp/temp.js'
// 模板檔案的路徑}]})}

前端腳手架

腳手架目錄 idea build configwebpack 配置檔案 dist打包輸出目 node modules依賴目錄 src assets資源 components自定義元件 pages每個vue 檔案對應乙個頁面，或者頁面的乙個元件 router路由 整個專案的路由跳轉配置 config....

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

專案 plop是乙個小工具，它提供了一種簡單的方法用一致的方式生成 或任何其他型別的檔案。比如在專案中，每個元件的初始化檔案內容基本一致，則可用plop來生成元件，避免每次手動生成的繁瑣。yarn add plop devexport default plop 入口檔案，需匯出乙個函式 此函式接收乙...

yeoman web腳手架工具

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