详解auto-vue-file:一个自动创建vue组件的包
作者:火锅小王子 时间:2024-05-11 09:11:32
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组件的包,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源:https://juejin.im/post/5cc273f5e51d456e40377314
标签:auto-vue-file,vue,组件
0
投稿
猜你喜欢
vue-loader和webpack项目配置及npm错误问题的解决
2024-04-29 13:10:33
20行Python代码实现一款永久免费PDF编辑工具
2023-11-17 23:51:45
用 prototype 定义自己的方法
2010-03-17 20:44:00
python切片作为占位符使用实例讲解
2023-10-13 09:26:50
python基于物品协同过滤算法实现代码
2021-06-23 21:56:16
Rs.Open参数说明
2008-05-12 22:43:00
去掉前面的0的sql语句(前导零,零前缀)
2024-01-25 22:25:23
Python模仿POST提交HTTP数据及使用Cookie值的方法
2022-05-04 04:37:35
数据库中identity字段不必是系统产生的唯一值 性能优化方法(新招)
2011-09-30 11:26:06
window.showModalDialog参数传递中含有特殊字符的处理方法
2024-04-18 09:48:16
Python实现时间序列可视化的方法
2021-03-07 20:42:00
Go语言并发编程之互斥锁Mutex和读写锁RWMutex
2024-04-25 15:00:32
Python手动实现Hough圆变换的示例代码
2023-11-03 03:12:42
Python使用BeautifulSoup4修改网页内容的实战记录
2023-04-10 15:59:56
定义列表 dt dl
2008-08-03 17:14:00
新手如何安装Mysql(亲测有效)
2024-01-17 00:21:01
python实现删除文件与目录的方法
2023-11-12 23:34:46
Windows下ORACLE 10g完全卸载的方法分析
2012-07-11 16:09:26
SQL查询排名函数实例
2024-01-22 13:14:10
Oracle 低权限数据库账户得到 OS 访问权限 提权利用
2009-06-19 17:27:00