内容简介:1: 我们在写2:写组件的时候可能还要在比如myForm组件
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
然后改成你自己需要的样子。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 创建 React 组件三种“姿势”
- 一键式创建React,Vue组件
- 使用TypeScript开发React应用(二) - 创建组件
- 使用TypeScript开发React应用(三) - 创建状态组件
- 使用 React Hooks 创建可复用的动画组件
- Angular7创建项目、组件、服务以及服务的使用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Namo Webeditor5.5一看就懂.
吳聲毅 / 金禾資訊 / 20040214 / NT$ 169
一看就懂系列書全以初學者的角度切入,全書以STEP BY STEP方式撰寫,並以豐富的圖片搭配教學,在最後更加上日常生活實例運用講解,一路學來一氣呵成。為了增進學習的效率更採用高級紙品全彩印刷,這麼好的書,您還在等什麼,一看就懂系列書保證是您最佳入門學習好伙伴。 本書特色: 1、一看就懂:Step by Step操作詳盡說明、讓您一看就懂 2、精選範例:精彩實務範例生動活......一起来看看 《Namo Webeditor5.5一看就懂.》 这本书的介绍吧!