??這是第?75篇不摻水的原創，想要了解更多，請戳上方藍色字體：政采云前端團隊關注我們吧～

本文首發于政采云前端團隊博客：告別復制粘貼：動態模板生成小技巧

https://www.zoo.team/article/dynamic-template-generation

前言

在日常開發中，我們需要不停的新建頁面和組件。以 Vue 項目為例，我們在新建一個頁面的時候，需要經歷一遍又一遍重復的過程：

1、先新建一個文件夾

2、然后新建一個 .vue 文件，寫上 、",
???""
??],"description":?"vue-template"
?}
}

效果展示如下：

基于 plop 自定義基礎的文件模板

plop的介紹可以看 plop官網：https://plopjs.com/documentation/)，plop 功能主要是基于 inquirer (https://github.com/SBoudrias/Inquirer.js/) 和 handlebars (https://github.com/handlebars-lang/handlebars.js) 。

簡單的說，plop 這個輕量的腳手架就是通過提前配置好要生成的頁面模板，并且在命令行中接受指定的參數，從而生成我們需要的模板。

• 在項目中安裝 plop

npm install --save-dev plop

• 項目根目錄下新建 plopfile.js

module.exports?=?function(plop){
??plop.setGenerator('test',{?//?這里的?test?是一個自己設定的名字，在執行命令行的時候會用到
??????description:?'generate?a?test',?//?這里是對這個plop的功能描述
??????prompts:?[
????????{
??????????type:?'input',?//?問題的類型
??????????name:?'name',?//?問題對應得到答案的變量名，可以在actions中使用該變量
??????????message:?'view?name?please',?//?在命令行中的問題
??????????default:?'test'?//?問題的默認答案
????????}
??????],
??????actions:?data?=>?{
??????????const?name?=?'{{name}}';
??????????const?actions?=?[
??????????{
??????????????type:?'add',?//?操作類型，這里是添加文件
??????????????path:?`src/views/${name}/index.vue`,?//?模板生成的路徑
??????????????templateFile:?'plop-templates/view/index.hbs',?//?模板的路徑
??????????????data:?{
????????????????name:?name
??????????????}
??????????}
????????];
????????return?actions;
??????}
????});
}

• 在根目錄下創建 plop-templates 文件夾，并在 plop-templates/view 里新建一個index.hbs

<div?/>
</template>

總結

以上是生活随笔為你收集整理的vue 动态变量名_【告别复制粘贴】动态模板生成小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

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