详解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加密解密7种方法总结分析
Oct 07 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
js选项卡的实现方法
2015/02/09 Javascript
javascript常用方法总结
2015/05/14 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python求众数问题实例
2014/09/26 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python面向对象之继承代码详解
2018/01/29 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
初婚未育证明
2014/01/15 职场文书
高校教师自荐信范文
2014/03/13 职场文书
环保建议书300字
2014/05/14 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS