详解如何创建并发布一个 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 动态调整图片尺寸实现代码
Dec 28 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python中pika模块问题的深入探究
2018/10/13 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
华为c/c++笔试题
2016/01/25 面试题
优秀生推荐信范文
2013/11/28 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
java实现web实时消息推送的七种方案
2022/07/23 Java/Android