详解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 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
js onclick事件传参讲解
Nov 06 Javascript
JavaScript window.location对象
Nov 14 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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实现获取文章内容第一张图片的方法
2014/11/04 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JSON格式化输出
2014/11/10 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
铭立家具面试题
2012/12/06 面试题
群众路线党课主持词
2014/04/01 职场文书
施工安全承诺书
2014/05/22 职场文书
校长创先争优承诺书
2014/08/30 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
《藏戏》教学反思
2016/02/23 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
linux中nohup和后台运行进程查看及终止
2021/06/24 Python