react專案中使用plop

2022-09-06 09:39:09 字數 1172 閱讀 5002

第一步,安裝依賴

npm install plop --dev  

//或者用yarn

yarn add plop --dev

第二步,在package同級目錄下新建plopfile.js

這是plop的入口檔案,需要匯出乙個函式,此函式接受乙個plop物件,用於建立生成器任務

1 module.exports = plop =>

11],

12actions: [

13}/}.js'//要放的路徑,

16templatefile: 'plop-tamplates/component.hbs'//模板路徑17}

18]19})

20 }

舉個栗子

此處可以看到我的模板是金黃色線標出的位置

然後就可以執行plop命令了,  注意, 生成器名字要保持一致

npm plop component

//或者yarn

執行命令後,就可以看到乙個問題(根據我們寫的prompts)

建立成功

同理可以建立css, test檔案(如圖,只要在金黃色圈出的模板位置新增相應檔案,  然後在plopfile.js中的actions中新增對應的方法, 然後呼叫 plop命令,就可以生成如  』header『  這樣結構的小組件了)

總結如下

1. 將plop木塊作為專案開發依賴安裝

2. 在package同級目錄下建立乙個plopfile.js檔案

3.在plopfile.js檔案中定義腳手架任務

4.編寫用於生成特定型別檔案的模板

5.通過plop提供的cli執行腳手架任務

在專案中使用react

1.執行 cnpm install react react dom s react安裝包 專門用於建立元件和虛擬dom的,同時元件的生命週期都在這個包中 react dom安裝包 專門進行dom操作的,最主要的應用場景就是reactdom.render 2.在index.html頁面中建立容器 di...

在 React 專案中使用 ECharts

重要檔案版本 在 react 專案中使用 echarts 生成圖表,與使用其他第三方庫沒有太大的區別,只要在 react 的元件componentdidmount宣告週期中初始化 echarts 圖表,然後在每次更新元件時呼叫 echarts 例項的setoption 方法更新配置即可,以下記錄了使...

react專案中使用狀態管理

1.安裝 redux 2.安裝 react redux 3.在src目錄下建立乙個store目錄 import from redux 1.定義 const notices state action default return state 2.建立 const store createstore n...