详解如何创建并发布一个 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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 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 iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
python中map()函数的使用方法示例
2017/09/29 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
会计找工作求职信范文
2013/12/09 职场文书
高一新生军训感言
2014/03/02 职场文书
红楼梦读书笔记
2015/06/25 职场文书
婚庆答谢词大全
2015/09/29 职场文书