详解vue组件开发脚手架


Posted in Javascript onJune 15, 2018

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

详解vue组件开发脚手架

在vueTable目录下安装对应的模块,后运行下面命令即可

npm i && npm run dev

目录结构

详解vue组件开发脚手架

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

Javascript 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 #Javascript
vue cli 3.0 使用全过程解析
Jun 14 #Javascript
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 #Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 #Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 #Javascript
vue中如何让子组件修改父组件数据
Jun 14 #Javascript
You might like
php学习之 认清变量的作用范围
2010/01/26 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
javascript的内存管理详解
2013/08/07 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
js实现轮播图特效
2020/05/28 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
python time模块用法实例详解
2014/09/11 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python如何将两个txt文件内容合并
2019/10/18 Python
python三引号如何输入
2020/07/06 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
python中uuid模块实例浅析
2020/12/29 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
篮球赛口号
2014/06/18 职场文书
公司合作意向书范文
2014/07/30 职场文书
政风行风整改报告
2014/11/06 职场文书
教师个人自我评价
2015/03/04 职场文书
女儿满月酒致辞
2015/07/29 职场文书