案例分享:阿里巴巴全球化电商核心系统架构实战,点击学习>>> 了解详情
写点什么

【告别复制粘贴】动态模板生成小技巧

2021 年 7 月 31 日

【告别复制粘贴】动态模板生成小技巧

前言


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


1、先新建一个文件夹

2、然后新建一个 .vue 文件,写上 <template>、<script>、<style>

3、如果页面涉及多个组件,还要新建 component 文件夹,并重复以上两个步骤

4、最后才是我们的业务代码


假设新建一个页面,并复制粘贴模板代码需要 1 分钟的时间,一个项目如果有 60 个页面,就得花费 1 个小时写这种重复性高、无聊且枯燥的代码。这显然不是我们想看到的,下面给大家分享几个提效小技巧。


基于 Vscode 的 Snippets 自定义代码块


通过 Vscode 的 Snippets 我们可以自定义 Snippets,从而实现快捷生成代码片段。


  • 打开 Vscode,依次点击文件——首选项——用户代码片段

Snippets 语法


prefix: 代码片段名字,即输入此名字就可以调用代码片段body: 这个是代码段的主体.需要编写的代码放在这里    $1: 生成代码后光标的初始位置$2: 生成代码后光标的第二个位置,按 tab 键可进行快速切换,还可以有 $3,$4,$5.....${1,字符}: 生成代码后光标的初始位置(其中 1 表示光标开始的序号,字符表示生成代码后光标会直接选中字符)description: 代码段描述,输入名字后编辑器显示的提示信息tab键制表符:\t换行: \r 或者\n
复制代码


以 vue.json 为例:


{ "Print to console": {  "prefix":"vue",  "body": [   "<template>",   "\t<div>test</div>",   "</template>",   "<script>",   "export default{",    "\tmounted(){$1},",    "\tcomponents: {},",    "\tdata() {",    "\t\treturn {",    "\t\t};",    "\t},",    "}",   "</script>",   "<style lang='less'>",   "</style>"  ],  "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

<template>  <div /></template>
<script>  export default {    name: '{{ properCase name }}',    props: {},    data() {      return {}    },    created() { },    mounted() { },    methods: {}  }</script>
<style lang="less">
</style>
复制代码
  • 新增脚本

package.json中新增

"script":{    ...,    "new":"plop"}
复制代码
  • 运行 npm run new

至此,一个简单的固定模板就自动生成好了。


plop 进阶


此时我们已经可以生成固定的模板了,那么问题来了,有些文件夹下面需要 .less 文件,有些则不需要,此时我们又该如何动态配置呢?


话不多说,直接看例子吧!


// plopfile.js 文件module.exports = function(plop){  plop.setGenerator('test',{      description: 'generate a test',      prompts: [        {          type: 'input',          name: 'name',          message: '请输入文件夹名称',        },        {          type: 'input',          name: 'less',          message: '需要less文件吗?(y/n)',        }      ],      actions: data => {        const name = '{{name}}';        let actions = [];        if (data.name) {          actions.push({            type: 'add',            path: `src/${name}/index.vue`, // 文件生成后所在的位置            templateFile: 'plop-templates/view/index.hbs', // 模板路径            data: {              name: name            }          });        }        if (data.less === 'y') {          actions.push({            type: 'add',            path: `src/${name}/index.less`, // 文件生成后所在的位置            templateFile: 'plop-templates/index.less', // 模板路径          })        }        return actions;      }    });  }
复制代码


此时我们已经可以动态配置文件的个数,那么问题又来了,在一个页面中有时需要导航条,有时不需要导航条,这种情况该如何解决呢?


// plopfile.js 文件module.exports = function(plop){  plop.setGenerator('test',{      description: 'generate a test',      prompts: [        {          type: 'input',          name: 'pageName',          message: '请输入文件夹名称',        },        {          type: 'input',          name: 'less',          message: '需要less文件吗?(y/n)',        },{          type: 'confirm',          name: 'hasNavbar',          message: '需要页面导航栏吗?(y/n)',          default: this.hasNavbar        }      ],      actions: data => {        const { pageName, less, hasNavbar } = data;        const name = '{{pageName}}';        let actions = [];        if (pageName) {          actions.push({            type: 'add',            path: `src/${name}/index.vue`,            templateFile: 'plop-templates/view/index.hbs',            data: {              name: name,              hasNavbar: hasNavbar, // 是否有操作按钮            }          });        }        if (less === 'y') {          actions.push({            type: 'add',            path: `src/${name}/index.less`,            templateFile: 'plop-templates/index.less',          })        }        return actions;      }    });  }
复制代码


// hbs 文件<template>  <div>    {{#if hasNavbar}}      <div>导航栏</div>    {{/if}}  </div></template>
<script>  export default {    name: '{{ properCase name }}',    props: {},    data() {      return {}    },    created() { },    mounted() { },    methods: {}  }</script>
<style lang="less">
</style>
复制代码


效果展示如下:



总结


本文主要给大家介绍了几种简单的新建文件模板的小技巧,每天一个提效小技巧,准点下班不是梦!若有其他更好的方法,欢迎大家在留言区评论。



头图:Unsplash

作者:Healer

原文:https://mp.weixin.qq.com/s/Yd7WNO8Ix8CaOM2APoeUgg

原文:【告别复制粘贴】动态模板生成小技巧

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021 年 7 月 31 日 15:00687

评论

发布
暂无评论
发现更多内容

视频门禁的优点及应用场景

anyRTC开发者

音视频 WebRTC RTC sdk

Flink的批数据SQL

五分钟学大数据

flink 5月日更

Qemu KVM Guest增强简述

焱融科技

云计算 虚拟机 高性能 存储 qemu

为什么你的Docker容器刚启动就停了?

运维研习社

Docker Linux 5月日更

实测Tengine开源的Dubbo功能

捉虫大师

dubbo 网关 tengine

《复仇者联盟》AI换脸平台

不脱发的程序猿

人工智能 开源 AI换脸平台 复仇者联盟

哈工大与华为终端有限公司签署首个HarmonyOS高校协同育人合作协议

科技汇

【大咖直播】Elastic 可观测性实战工作坊

小小的一朵云

elastic

从源码中来,到业务中去,React性能优化终极指南

有道技术团队

前端 React 有道精品课

索信达控股:金融机构如何打造最适合自己的个性化推荐系统?

索信达控股

大数据 金融科技 金融 个性化推荐 营销数字化

BI系统里的数据赋能与业务决策

薄荷点点

数据产品经理 决策 BI 数据驱动 风险识别

最佳入门系列 | 何为服务网关?

架构精进之路

微服务 5月日更

极速恢复精灵 Tech Support

凌天一击

【多线程与高并发】从一则招聘信息进入多线程的世界

牧小农

Java 多线程与高并发

GitHub开源14.5万行阿波罗11号源代码

不脱发的程序猿

GitHub 开源 阿波罗11号

网络攻防学习笔记 Day27

穿过生命散发芬芳

5月日更 网络攻防

网格策略交易软件,量化马丁倍投交易机器人

13823153121

集成学习中的随机森林

华为云开发者社区

机器学习 决策树 随机森林 集成学习 Bagging

☕️【Java 技术之旅】带你看透Lambda表达式的底层

李浩宇/Alex

Java Lambda 底层原理 5月日更 行为参数化

集群镜像:实现高效的分布式应用交付

阿里巴巴云原生

数据库 容器 开发者 云原生 存储

MySQL 数据库救火:磁盘爆满了,怎么办?

华为云开发者社区

数据库 磁盘 MySQL 数据库 日志文件 磁盘爆满

阿里云联合中国信通院发布《云计算开放应用架构》标准,加速云原生应用规模化落地进程

阿里巴巴云原生

容器 开发者 运维 云原生 k8s

OCR性能优化:从神经网络到橡皮泥

华为云开发者社区

神经网络 机器学习 OCR 橡皮泥 CNN网络

VSCode 无鼠标操作快捷键对比Atom

追风的少年

电子产品PCB电路板散热的方法

不脱发的程序猿

嵌入式 PCB 电路板散热 电子电路 电路板

合作伙伴眼中的HarmonyOS 专访方太智能厨电专家俞贵涛

科技汇

终于看到阿里大牛能把springboot讲的如此出神入化

云流

Java 程序员 架构 计算机

请警惕 ES 的三大坑

悟空聊架构

elasticsearch 架构 分布式 微服务 ES

聊聊微服务治理的落地问题 | Geek大咖说第二期

百度Geek说

微服务 自动化

NUCLEO-L432KC实现UART1、UART2双串口数据通信(STM32L432KC)

不脱发的程序猿

嵌入式 stm32 单片机 NUCLEO-L432KC 串口通信

可视化突破海绵城市发展困境,智慧城市从“一张图”开始

一只数据鲸鱼

数据可视化 智慧城市 智慧水务 三维可视化 海绵城市

数据库运维技术发展与展望

数据库运维技术发展与展望

【告别复制粘贴】动态模板生成小技巧-InfoQ