动态添加input_前端提效必备:动态模版生成

前言

在日常开发中,我们需要不停的新建页面和组件。以 Vue 项目为例,我们在新建一个页面的时候,需要经历一遍又一遍重复的过程:

1、先新建一个文件夹

2、然后新建一个 .vue 文件,写上 、",
   ""
  ],"description": "vue-template"
 }
}

效果展示如下:

117f4fd3d9a1c61a8f7c1aea9d0fc10a.gif

基于 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534267.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在dom最前面插入_JavaScript中的DOM

1. 关于DOM文档对象模型(DocumentObject Model)&#xff0c;是基于浏览器编程的一套API接口&#xff0c;W3C出台的推荐标准&#xff0c;每个浏览器都有一些细微的差别&#xff0c;其中以Mozilla(火狐)的浏览器最与标准接近。通过 DOM&#xff0c;可以访问所有的 HTML元素&#…

python 快速删除程序_如何快速一次性卸载所有python包(第三方库)呢

很多时候我们都会有一个麻烦事&#xff0c;就是打开pycharm或者VScode等的时候&#xff0c;都有可能因为自己电脑上面安装的第三方模块过多&#xff0c;导致电脑很卡&#xff0c;风扇转速不停地增加&#xff0c;这时候我们就会想去卸载一些不太用得着的第三方模块&#xff0c;但…

python正则表达式修饰符_Python正则表达式

正则表达式是一个特殊的字符序列&#xff0c;它能帮助你方便的检查一个字符串是否与某种模式匹配。re 模块使 Python 语言拥有全部的正则表达式功能。compile 函数根据一个模式字符串和可选的标志参数生成一个正则表达式对象。该对象拥有一系列方法用于正则表达式匹配和替换。r…

当代最值得收藏的画家作品_当代最具潜力和收藏价值的十大画家

原标题&#xff1a;当代最具潜力和收藏价值的十大画家当代从事绘画的人成千上万&#xff0c;哪些名家作品值得收藏&#xff1f;当前都有哪些“潜力股”&#xff0c;相关专家综合市场分析&#xff0c;纯从艺术水准上列出值得收藏的“潜力股”&#xff0c;供爱好书画收藏的各界人…

备抵附加账户的期末余额_会计账户的分类(二)

待摊费用账户的格式和运用方法同盘存类账户&#xff0c;即&#xff1a;期初如果有余额在借方&#xff0c;本期发生额的增加数在借方&#xff0c;本期发生额的减少数在贷方&#xff0c;期末如果有余额在借方。预提费用账户是指用来核算和监督按规定预先提取计入当期&#xff0c;…

mysql union all 别名_mysql union和union all

如下先创建2个表&#xff0c;aa bb.CREATE table aa(uid int(20) not null,name VARCHAR(30) not null)engineinnodb default charsetutf8mb4 COLLATE utf8mb4_general_ci;INSERT INTO aa(uid, name) VALUES (10, 张芳);INSERT INTO aa(uid, name) VALUES (11, 王凯);INSERT IN…

MySQL不走联合索引_mysql group by 多列优化思路?为什么不走联合索引?

explain SELECT a, b, COUNT(*) FROM tbnameGROUP BY a, border by a DESClimit 1a 和 b 列已经设置联合索引&#xff0c; 为什么这种操作也会执行全表扫描呢&#xff1f;explain SELECT a, b FROM tbnameGROUP BY a, border by a DESC去掉 COUNT 和 limit 则走索引没有扫描&am…

mysql ddl 锁_MySQL Online DDL导致全局锁表案例分析

MySQL Online DDL导致全局锁表案例分析我这边遇到了什么问题?线上给某个表执行新增索引SQL, 然后整个数据CPU打到100%, 连接数暴增到极限, 最后导致所有访问数据库的应用都奔溃.SQL如下:ALTER TABLE bookADD INDEX idx_sub_title (sub_title ASC);能看到什么?10063293, root,…

ci框架 乱码 mysql_mysql容器乱码问题

在docker-compose.yml文件中定义mysql导入utf-8的万国码services:mysql:image:mysql:5.7# command: [--character-set-serverutf8mb4, --collation-serverutf8mb4_unicode_ci]volumes:-./data/docker/mysql:/var/lib/mysql-./mysql/:/docker-entrypoint-initdb.d/-./conf/mys…

mysql分表 查询 优化_MySQL性能管理及架构(查询优化、分库分表)一遍文章搞定...

相关配置参数&#xff1a;slow_query_log # 启动停止记录慢查日志&#xff0c;慢查询日志默认是没有开启的可以在配置文件中开启(on)slow_query_log_file # 指定慢查日志的存储路径及文件&#xff0c;日志存储和数据从存储应该分开存储long_query_time # 指定记录慢查询日志SQL…

dokcer mysql修改编码_默认支持utf8编码的mysql docker镜像

其他人都是不正确的使用mysql容器镜像可以很快速的运行mysql&#xff0c;免去了传统的虚拟机安装方式的繁琐配置。但是使用官方的mysql镜像&#xff0c;你会遇到中文乱码的问题&#xff0c;原因是官方镜像的字符集默认值不是utf8。这时候你去google&#xff0c;会找到一些文章&…

mysql临时表 清空_在数据库中临时表什么时候会被清除呢

展开全部我们仍使用 实验 05 中的环境&#xff0c;略去准备数据的过程。我们仍然使用两个会话&#xff0c;62616964757a686964616fe59b9ee7ad9431333433646439一个会话 run&#xff0c;用于运行主 SQL&#xff1b;另一个会话 ps&#xff0c;用于进行 performance_schema 的观察…

locust mysql_locust性能压测连接mysql,随机取出班级,绑定学生

from locust import HttpLocust, TaskSet, taskimport pymysqlimport randomclass UserBehavior(TaskSet):def on_start(self):db pymysql.connect("ip地址", "用户名", "密码", "数据库")cursor db.cursor()cursor.execute("S…

mysql无法添加或更新子行_违反完整性约束:1452无法添加或更新子行:

我试图在我的注释表中插入值&#xff0c;但出现错误。俗话说&#xff0c;我不能添加或更新子行&#xff0c;我也不知道这意味着什么。我的架构看起来像这样-- ------------------------------ Table structure for comments-- ----------------------------DROP TABLE IF EXIST…

python医学图像分割_基于cv2的医学图像分割

例如&#xff0c;图像如下所示&#xff1a;import cv2import numpy as npimg cv2.imread("mdb168.pgm",0)import matplotlib.pyplot as pltplt.imshow(img, cmap"gray")我想删除图像中所有的伪影和不必要的部分。在为此&#xff0c;我首先对图像进行二值化…

python解析response的json_从HTML responseTex解析JSON

因此&#xff0c;我大体上同意&#xff0c;更好的解决方案是确保服务器只返回JSON&#xff0c;不过这是通过客户端Javascript实现的一种快速方法&#xff0c;如Barmer所建议的那样&#xff0c;将html解析到DOM&#xff0c;获取body中的文本childNode并在其上运行JSONParse。在v…

mysql 密码修改时间_Mysql修改密码的方法

修改mysql密码的方法&#xff1a;最简单的&#xff0c;在Navicat连接后点用户&#xff0c;找到rootlocalhost直接修改。注意如果装了xampp&#xff0c;在phpmyadmin配置文件也需要改两处密码。下面是在命令行修改的方法。方法1&#xff1a;用mysqladmin----------------亲测这个…

svn版本库浏览器_在SVN版本库浏览器中直接编辑文件保存后不会弹..._网络编辑_帮考网...

原因是没有实际添加到版本库中&#xff0c;要添加到版本库必须执行“Commit”。具体分析如下&#xff1a;SVN错误处理svn : Couldn’t perform atomic initialization. 临时解决办法&#xff1a;升级sqlite。原本安装的是 subversion 1.6.16 sqlite 3.6.13&#xff0c;一直报”…

ubuntu下使用python将ppt转成图片_Ubuntu下使用Python实现游戏制作中的切分图片功能...

本文实例讲述了Ubuntu下使用Python实现游戏制作中的切分图片功能。分享给大家供大家参考&#xff0c;具体如下&#xff1a;why拿到一个人物行走的素材&#xff0c;要用TexturePacker打包。TexturePacker打包后&#xff0c;助于游戏加载图片效率&#xff0c;且比较好管理。目前得…

世上最简单的mysql_mysql这样学最简单|基本操作上

这是数据库系列的第一篇文章&#xff0c;主要是对mysql的基本操作有一个了解。本系列的教程会先从基础出发&#xff0c;逐步过渡到优化。一、前提在这里我们不会从如何去安装数据库开始讲起&#xff0c;而是在安装完之后从操作数据库开始&#xff0c;文中所有的代码均在我自己的…