还在为写.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 !

相关文章
|
23天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
121 1
|
2天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
26 8
|
3天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
23 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
65 18
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
45 1
|
2月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。