详解如何创建并发布一个 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 相关文章推荐
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php自定义错误处理用法实例
2015/03/20 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
$()JS小技巧
2007/07/21 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python的unittest测试类代码实例
2017/12/07 Python
Django添加feeds功能的示例
2018/08/07 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
数据库连接池的工作原理
2012/09/26 面试题
小学生暑假感言
2014/02/06 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
2014年采购部工作总结
2014/11/20 职场文书
消防演习通知
2015/04/25 职场文书
golang slice元素去重操作
2021/04/30 Golang
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL