使用plop实现自动新建项目文件

为什么

一般项目开发过程中,我们都要编写(CV)一大堆重复性的代码,比如一个views/login/index.vue比如store/modules/app.js这些文件都是重复毫无意义的,找一个自动生成的工具就很有价值了

使用

github上找到了这样一个包plop,具体信息可以自行去看官方文档,下面直接给出我在项目中使用的

可以看我的这个项目,里面有具体的demofast_h5_vue

1.项目根目录下新建plopfile.js

const viewGenerator = require('./plop-templates/view/prompt')
const componentGenerator = require('./plop-templates/component/prompt')
const storeGenerator = require('./plop-templates/store/prompt.js')

module.exports = function(plop) {
  plop.setGenerator('view', viewGenerator)
  plop.setGenerator('component', componentGenerator)
  plop.setGenerator('store', storeGenerator)
}

这里是三个文件类型分别是view页面,component组件,store vuex文件

2.项目根目录下新建plop-templates文件夹

代码太多,我直接给出文件链接plop-templates

3.新增脚本

package.json中新增

"script":{
    ...,
    "new":"plop"
}

4.具体使用

控制台直接输入命令

yarn new

按照提示选择文件类型

关于

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,187评论 0 1
  • 痛风是一个很严重的疾病,常常是因为体内尿酸过高而导致的,因为平时饮酒过多、长期处于湿冷环境下生活、外伤手术感染等诱...
    静静有话说阅读 258评论 0 1
  • 我很少会想起自己的前任,倒不是洒脱大度轻描淡写,只是脑回路足够短,记忆线不够长。前几日,一个无事闲的蛋疼的亲戚向我...
    小郭阿琳阅读 285评论 0 0
  • 有段时间没有更文了,在于自我状态的调整。之前的文章都有想给一些人关注的动力,而后却没有了。后来发现写作是自己与自己...
    王人三阅读 271评论 2 2
  • ls 查看文件 -a 查看所有文件 -l 显示文件详细信息 cd 退回和切换 ~ 切换到主目录 . 退到当前目录 ...
    浮_屠阅读 202评论 0 0