详解vue组件开发脚手架
generator-vue-component可以快速生成自己的组件开发的脚手架，类似于vue-cli生成vue项目，这脚手架是目录结构是方便组件开发和调试
由于脚手架是由yeoman搭建，所以必须全局安装yeoman
npm install yo
然后全局安装generator-vue-component
npm install generator-vue-component -g
到项目目录，获取对应的开发模板
yo vue-component-developer
运行上面命令会弹出下面，依次输入对应的信息，到Your component type这一步可以选择对应的组件类型，有组件和指令两种模板，选择完成后输入对应的组件名称或者指令名称即可，例如我们声明的组件名为vue-table
在vueTable目录下安装对应的模块，后运行下面命令即可
npm i && npm run dev
目录结构
index.js
此文件是vue组件声明并导出
import VueTable from './src/components/VueTable.vue';
VueTable.install = function (Vue) {
Vue.component(VueTable.name, VueTable)
};
export default VueTable;
components/VueTable.vue
开发的组件文件
<style lang="scss" scoped>
</style>
<template>
<div>
<h1>{{ title }}</h1>
<button @click="handleClick">click</button>
</div>
</template>
<script>
export default {
name: "vue-table",
data() {
return {
title: "vue-table"
};
},
methods: {
handleClick: function () {
alert("vue-table");
}
},
mounted() {
}
};
</script>
App.vue
App.vue是用来测试组件的使用
<template>
<div id="app">
<vue-table></vue-table>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {}
}
}
</script>
<style lang="scss">
</style>
主要用来编写代码的文件有components/VueTable.vue和demo/App.vue，一个用来开发，一个用来测试，其他不需要管
开发完怎么办？
开发完成可以有两个选择
本地安装 npm install 项目的本地路径
发布到npm，远程安装 npm install vue-table
如何使用？
import VueTable from 'vue-table' Vue.use(VueTable);
github地址
最后附上github地址，给个star吧！https://github.com/KELEN/generator-vue-component-developer
相关文章
表单元素挺多的，本文主要介绍了element的表单元素使用总结，主要包括文本框类、选择类、其他类，有一定的参考价值，感兴趣的可以了解一下2021-06-06
element-ui使用el-date-picker日期组件常见场景分析
最近一直在使用 element-ui中的日期组件,所以想对日期组件常用的做一个简单的总结,对element-ui el-date-picker日期组件使用场景分析感兴趣的朋友一起看看吧2024-05-05
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
这篇文章主要介绍了vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
husky是一个git hooks工具（git的钩子工具，可以在特定时机执行特定的命令），这篇文章主要介绍了Vue3-基于husky的代码检查工作流,需要的朋友可以参考下2023-11-11
在项目开发中,有两个功能特别类似,如果单独实现,会有很多重复的代码，这时候就会用到逻辑复用，本文主要介绍了vue3 逻辑复用的实现示例，具有一定的参考价值，感兴趣的可以了解一下2024-02-02
下面小编就为大家分享一篇Vuex中mutations与actions的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面这篇文章主要给大家介绍了八个Vue中常用的v指令的相关资料,需要的朋友可以参考下2022-04-04
vue转electron项目及解决使用fs报错:Module not found: Error: Can&apo
这篇文章主要给大家介绍了关于vue转electron项目及解决使用fs报错:Module not found: Error: Can‘t resolve ‘fs‘ in的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
项目开发中需要做一个轮询,所以将实现的过程记录了一下,下面这篇文章主要给大家介绍了关于vue轮询解决方案的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue中使用$http.post请求传参的错误及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论