详解如何创建并发布一个 vue 组件


Posted in Javascript onNovember 08, 2018

步骤

创建 vue 的脚手架

npm install -g @vue/cli
vue init webpack

绑定 git 项目

cd existing_folder
git init
git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git
git add .
git commit
git push -u origin master

写组件

创建组件 src/components/xxx.vue

例如:

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <h2>Essential Links</h2>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
</style>

发布

npm publish

展示

详解如何创建并发布一个 vue 组件

代码参考
vue-component-popup

参考文档
Packaging Vue Components for npm
Vue CLI 3
vue-sfc-rollup

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 #Javascript
webpack 开发和生产并行设置的方法
Nov 08 #Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 #Javascript
深入解析ES6中的promise
Nov 08 #Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 #Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 #Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 #Javascript
You might like
晶体管单管来复再生式收音机
2021/03/02 无线电
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PDO::_construct讲解
2019/01/27 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers