详解auto-vue-file:一个自动创建vue组件的包


Posted in Javascript onApril 26, 2019

auto-vue-file

auto create .vue file by shell command

通过终端自动创建vue文件

前言:

1: 我们在写xxx.vue页面文件的时候,一般都要写这些重复的代码:

<template>
 <div class="zlj-comp-ct">
 zlj组件
 </div>
</template>
<script>
export default {
 name: 'zlj'
}
</script>
<style lang="scss" scoped>
.zlj-comp-ct {

}
</style>

2:写组件的时候可能还要在components目录下面新建一个目录:xxx,里面是xxx.vue和index.js

比如myForm组件

详解auto-vue-file:一个自动创建vue组件的包

// myForm.vue
<template>
 <div class="myForm-comp-ct">
 myForm组件
 </div>
</template>
<script>
export default {
 name: 'myForm'
}
</script>
<style lang="scss" scoped>
.myForm-comp-ct {

}
</style>
// index.js
import myForm from './myForm.vue'
export default myForm

每次都写这些代码,是不是很烦?

主角登场:auto-vue-file

安装

npm install auto-vue-file -g

使用

 auto-vue-file -c

结果

详解auto-vue-file:一个自动创建vue组件的包

这样在components目录下面生成myForm文件

参数说明:

名称 说明 使用例子
component 创建一个vue组件, 默认在components目录下面 auto-vue-file -c 或 auto-vue-file --component
page 创建一个vue组件,默认在views目录 auto-vue-file -p 或 auto-vue-file --page
path 在指定目录创建vue组件,需要提供-c或-p参数 auto-vue-file -c --path ./src/haha 或 auto-vue-file -p --path ./src/haha

更多:

你也可以使用自己的vue模版文件,文件名为auto-vue-file.template.js,存放在项目根目录下面,内容如下

// template.js you can generate
// auto-vue-file.template.js
  module.exports = {
   vueTemplate: componentName => {
   return `<template>
   <div class="${componentName}-comp-ct">
   ${componentName}组件
   </div>
  </template>
  <script>
  export default {
   name: '${componentName}'
  }
  </script>
  <style lang="scss" scoped>
  .${componentName}-comp-ct {
  
  }
  </style>
  `
   },
   entryTemplate: componentName => {
   return `import ${componentName} from './${componentName}.vue'
  export default ${componentName}`}
  }

你也可以执行

auto-vue-file --init

自动生成该配置文件:auto-vue-file.template.js

然后改成你自己需要的样子。

总结

以上所述是小编给大家介绍的uto-vue-file:一个自动创建vue组件的包,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
js倒计时抢购实例
Dec 20 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
vue实现节点增删改功能
Sep 26 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
vue组件间的参数传递实例详解
Apr 26 #Javascript
详解VUE前端按钮权限控制
Apr 26 #Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 #Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 #Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 #Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 #Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 #Javascript
You might like
php在线解压ZIP文件的方法
2014/12/30 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
javascript如何实现create方法
2019/11/04 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
自荐书格式
2013/12/01 职场文书
借款担保书范文
2014/05/13 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
个人简历自荐信
2014/06/26 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
2015年教研工作总结
2015/05/23 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android