详解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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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输出全球各个时区列表的方法
2015/03/31 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php图像生成函数之间的区别分析
2012/12/06 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python识别图像并提取文字的实现方法
2019/06/28 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python实现马丁策略的实例详解
2021/01/15 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
Shell编程面试题
2012/05/30 面试题
酒店值班经理的工作职责范本
2014/02/18 职场文书
硕士生工作推荐信
2014/03/07 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
教室布置标语
2014/06/26 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
深入理解go slice结构
2021/09/15 Golang
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS