还在为写.vue文件烦恼吗?快来用dot-vue-cli交互式生成吧!

简介: 还在为写.vue文件烦恼吗?快来用dot-vue-cli交互式生成吧!

写过vue的同学都知道,单文件组件.vue在开发中使用频率是非常高的。

如果不想再手写或者CV的话,不妨尝试一下我写的这个小工具,支持交互式生成.vue文件,生成的过程只需要回答一些小问题即可。

目前仅支持vue2和部分属性,如果对这个项目感兴趣的话,欢迎提issue,欢迎提pr(合适的话我会第一时间merge),或者fork一份改成自己想要的效果吧

项目地址:https://github.com/FrankKai/dot-vue-cli


dot-vue-cli


Vue2.x single file component .vue generator.

features

  1. Set name, props, data, computed, watch and choose lifecycles, methods by interactive command line.
  2. Import vuex, mapState, mapMutations, mapActions by interactive command line.

install

npm install -g dot-vue-cli

usage

dot-vue

Type dot-vue in terminal and follow the instructions.

1460000038163320.gif

网络异常,图片无法展示
|

process


1.generate template configs


{
  filename: "foo",
  name: "foo",
  data: true,
  "data details": "a,b,c",
  computed: true,
  "computed details": "a,b,c",
  watch: true,
  "watch details": "a,b,c",
  methods: true,
  "methods details": "a,b,c",
  "vue lifecycle hooks": ["mounted", "destroyed"],
  "vuex helpers": ["mapState", "mapMutations", "mapActions"],
};


2.generate target .vue file based on template literals

image.png


image.png

Enjoy it !

相关文章
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
330 2
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
310 137
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
819 0
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
441 1
|
5月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
278 0
|
6月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
487 17
|
6月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
292 1
|
6月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
557 0
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。