详解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 圆角div的实现代码
Oct 15 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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静态类
2006/11/25 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
Node.js readline模块与util模块的使用
2018/03/01 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python装饰器原理与用法分析
2018/04/30 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Django 自定义分页器的实现代码
2019/11/24 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
初中生自我评价
2014/02/01 职场文书
青春奉献演讲稿
2014/05/08 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
小班下学期个人总结
2015/02/12 职场文书
硕士学位申请报告
2015/05/15 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python