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

 更新时间:2019年04月26日 14:36:31   作者:火锅小王子  
这篇文章主要介绍了auto-vue-file:一个自动创建vue组件的包,需要的朋友可以参考下

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组件

// 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

结果

这样在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组件的包,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    Vue子组件向父组件通信与父组件调用子组件中的方法

    这篇文章主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • Vue通过WebSocket建立长连接的实现代码

    Vue通过WebSocket建立长连接的实现代码

    这篇文章主要介绍了Vue通过WebSocket建立长连接的实现代码,文中给出了问题及解决方案,需要的朋友可以参考下
    2019-11-11
  • vue3+element Plus实现表格前端分页完整示例

    vue3+element Plus实现表格前端分页完整示例

    这篇文章主要给大家介绍了关于vue3+element Plus实现表格前端分页的相关资料,虽然很多时候后端会把分页,搜索,排序都做好,但是有些返回数据并不多的页面,或者其他原因不能后端分页的通常会前端处理,需要的朋友可以参考下
    2023-08-08
  • vue的keep-alive中使用EventBus的方法

    vue的keep-alive中使用EventBus的方法

    keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。这篇文章主要介绍了vue的keep-alive中使用EventBus的方法,需要的朋友可以参考下
    2019-04-04
  • vue前端项目打包成Docker镜像并运行的实现

    vue前端项目打包成Docker镜像并运行的实现

    这篇文章主要介绍了vue前端项目打包成Docker镜像并运行的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • VUE如何实现点击文字添加颜色(动态修改class)

    VUE如何实现点击文字添加颜色(动态修改class)

    这篇文章主要介绍了VUE如何实现点击文字添加颜色(动态修改class),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue-router为激活的路由设置样式操作

    vue-router为激活的路由设置样式操作

    这篇文章主要介绍了vue-router为激活的路由设置样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vueJs函数toRaw markRaw使用对比详解

    vueJs函数toRaw markRaw使用对比详解

    这篇文章主要为大家介绍了vueJs函数toRaw markRaw使用对比详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue3.0之Router的使用你了解吗

    vue3.0之Router的使用你了解吗

    这篇文章主要为大家详细介绍了vue3.0之Router的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明

    Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明

    这篇文章主要介绍了Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03

最新评论