详解如何创建并发布一个 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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
个人简历自我评价
2014/02/02 职场文书
数学检讨书1000字
2014/02/24 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
python获取对象信息的实例详解
2021/07/07 Python