AIGC 应用、数据分析等企业 10+ 热门专题课,就在极客时间企业版>>> 了解详情
写点什么

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

  • 2021-07-31
  • 本文字数:3914 字

    阅读完需:约 13 分钟

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

AI 大模型超全落地场景&金融应用实践,8 月 16 - 19 日 FCon x AICon 大会联诀来袭、干货翻倍!

前言


在日常开发中,我们需要不停的新建页面和组件。以 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-07-31 15:001138

评论

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

生成式AI:业务流程的变革与机遇

百度开发者中心

人工智能 生成式AI 文心一言

万界星空科技|免费开源MES系统|自动排产管理

万界星空科技

开源 MES系统

Parallels Desktop 19 永久激活安装Windows图文教程

晴雯哥

朝夕光年游戏自动化测试实践

字节跳动技术范儿

测试 自动化测试 游戏测试

Presto 设计与实现(十二):SQL 逻辑计划

冰心的小屋

数据湖 presto 设计与实现 SQL Plan

2023年广州国际大健康产品及健康食品展会

秋硕展览

2023健博会 保健用品展 护理用品

低代码/无代码平台:加速应用开发的工具

高端章鱼哥

低代码 快速开发 无代码 JNPF

Clang编译数据库信息扩展

maijun

Clang 编译数据库

Data Rescue Pro for Mac(磁盘数据恢复工具) v6.0.8中文版

mac

数据恢复软件 苹果mac Windows软件 Data Rescue

Pr2023v23.6 Mac中文激活版 Premiere Pro安装包下载及安装教程

晴雯哥

​iOS上架审核宝典:如何避免被拒一次提交成功

ios

大数据平台与数据仓库的五大区别

行云管家

大数据 数据仓库 数据安全 大数据平台

没有永远的王者…Zig替代C,将成定局!

互联网工科生

C语言 C++ Zig语言

一文带你全面理解向量数据库

这我可不懂

数据库 向量数据库

华为云软件精英实战营——感受软件改变世界,享受Coding乐趣

华为云PaaS服务小智

软件开发 华为云 大赛

生成式AI:助力网络安全,挑战与机遇并存

百度开发者中心

人工智能 网络安全、 生成式AI 文心一言

打造千亿文件量级的大规模分布式文件系统

Baidu AICLOUD

文件系统 分布式文件存储 元数据

PHP/MySQL开发环境 MAMP Pro for Mac激活安装

胖墩儿不胖y

Mac软件

MegEngine 使用小技巧:Profiler使用手册

MegEngineBot

开源 性能优化

HarmonyOS“一次开发,多端部署“优秀实践——玩机技巧,码上起航

HarmonyOS开发者

HarmonyOS

DR5018M|IPQ5018 11AC SOM WIFI6 Pioneering the Future of Wireless Innovation

wallyslilly

wifi6 ipq5018

软件测试/测试开发丨Python 学习笔记 之 链表

测试人

Python 程序员 软件测试 自动化测试 测试开发

直播预告!生鲜与零售商品识别系统产业实践与部署详解

飞桨PaddlePaddle

人工智能 百度飞桨 硬件生态

Graph + LLM|图数据库技术如何助力行业大语言模型应用落地

悦数图数据库

数据库 图数据库

如何使用io_uring构建快速响应的I/O密集型应用?

华为云开发者联盟

开发 华为云 华为云开发者联盟 企业号 8 月 PK 榜

探索生成式人工智能的前景

高端章鱼哥

人工智能 AIGC 生成式人工智能

TDD、BDD、ATDD都是什么、有什么区别?(上)

禅道项目管理

面试了38位Java候选人之后,我总结出了他们关于面试中的16条通病

程序员小毕

Java 程序员 面试 简历 八股文

生成式AI:重新定义生产力与创造力

百度开发者中心

人工智能 ChatGPT 生成式AI 文心一言

大数据平台三大优势详解-行云管家

行云管家

数据库 大数据 数据安全 大数据平台

Graph + LLM 实践指南|如何使用自然语言进行知识图谱构建和查询

悦数图数据库

数据库 图数据库

【告别复制粘贴】动态模板生成小技巧_文化 & 方法_政采云前端团队_InfoQ精选文章