详解如何创建并发布一个 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 获取LI里的内容
Dec 17 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
JS实现音量控制拖动
Jan 15 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
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中的串行化变量和序列化对象
2006/09/05 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
六道php面试题附答案
2014/06/05 面试题
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
员工年终演讲稿
2014/01/03 职场文书
班组长竞聘书
2014/03/31 职场文书
高效课堂标语
2014/06/26 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
伏羲庙导游词
2015/02/09 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书