AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

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

    阅读完需:约 13 分钟

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

前言


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

评论

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

拼多多根据ID取商品详情原数据 API (pinduoduo.item_get_app_pro)在电商中的应用

技术冰糖葫芦

API

软件测试/测试开发全日制/测试内推|字节跳动岗位开放~

霍格沃兹测试开发学社

每日一题:LeetCode-139. 单词拆分

Geek_4z9ami

Go 面试 算法 LeetCode 动态规划

Hackathon | Mint Blockchain 启动全球 NIP 创意提案黑客松活动!

NFT Research

blockchain 黑客松 NFT\

助力 AI 技术共享,蚂蚁开源又一核心技术“因果学习系统 OpenASCE”

可信AI进展

人工智能 机器学习 开源

探索大模型在端侧应用的新形态

百度开发者中心

人工智能 图像识别 大模型

未来招聘更难?用友大易招聘云助力企业面对未来更从容

用友BIP

智能招聘

阿里云计算平台大数据基础工程技术团队直聘!!!

阿里云大数据AI技术

数据讲述中国故事!和鲸助力中国综合社会调查(CGSS)数据分析与可视化大赛圆满收官

ModelWhale

人工智能 大数据 竞赛 中国人民大学 人文社科

AI时代我们的IT团队架构应该如何应变

Onegun

人工智能 AI 团队组织

2023 CSIG青年科学家会议丨多模态大模型时代下的文档图像处理

热爱编程的小白白

软件测试/测试开发/岗位内推丨字节跳动岗位开放

测试人

软件测试

喜讯!尚思卓越再次入选数据安全创新能力全景图谱

尚思卓越

数据安全

软件测试/人工智能/全日制测试开发|利用ChatGPT自动生成自动化测试脚本

霍格沃兹测试开发学社

软件测试/全日制测试开发/测试管理|如何制定合理的职业规划

霍格沃兹测试开发学社

亿级流量摩擦出来的 ES 稳定性之道

常清静

方法论 ES 建模 Elastic Search ES优化

小度推出小度学习机K16:内容、AI功能、软硬件配置全面升级

新消费日报

好用的鼠标键盘记录工具:Mouse And Keyboard Recorder激活中文

胖墩儿不胖y

Mac软件 鼠标管理工具 Mac软件鼠标辅助

【Spring技术专题】「实战开发系列」保姆级教你SpringBoot整合Mybatis框架实现多数据源的静态数据源和动态数据源配置落地

码界西柚

spring mybatis springboot 数据源切换 2024年第六篇文章

探索跨语言、跨模态、跨任务的大模型驱动应用生态繁荣

百度开发者中心

人工智能 大模型

“用友-旭阳数智化联合团队”荣获“2023数字化践行者基石奖”

用友BIP

企业数智化

快手商品详情数据接口(ks.item_get)丨快手API接口

tbapi

快手商品详情数据接口 快手API接口 快手商品数据接口 快手数据采集

请重视你的简历

老张

面试 简历优化 简历

数据如何驱动AI大模型的竞争优势

百度开发者中心

人工智能 AI 大模型

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