详解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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 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+Html+缓存
2006/12/20 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
Yii配置文件用法详解
2014/12/04 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP微信支付开发实例
2016/06/22 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python爬虫实例详解
2018/06/19 Python
详解Python做一个名片管理系统
2019/03/14 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
用Python解数独的方法示例
2019/10/24 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
毕业生物理教师求职信
2013/10/17 职场文书
教师自我评价范文
2013/12/16 职场文书
2014年党支部学习材料
2014/05/19 职场文书
股指期货心得体会
2014/09/13 职场文书
趣味运动会开幕词
2015/01/28 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle