步骤

创建 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

代码参考

  1. vue-component-popup

参考文档

  1. Packaging Vue Components for npm
  2. Vue CLI 3
  3. vue-sfc-rollup

原文地址:https://segmentfault.com/a/1190000016945983

如何创建并发布一个 vue 组件的更多相关文章

  1. 自己编写并发布一个Vue组件

    自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...

  2. 如何开发和发布一个Vue插件

    前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...

  3. 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"

    如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...

  4. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  5. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  6. 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  7. 如何从0开发一个Vue组件库并发布到npm

    1.新建文件夹在终端打开执行 npm init -y 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等 { "name": "v ...

  8. 从0到1发布一个Vue Collapse组件

    需求背景 最近在项目中遇到了一个类似Collapse的交互需求,因此到github上找了一圈关于Vue Collapse的相关轮子,但是多少都有些问题.有的是实现问题,例如vue2-collapse, ...

  9. 【万字长文】从零配置一个vue组件库

    简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...

随机推荐

  1. 彩色图像--色彩空间 CMY(K)空间

    学习DIP第63天 转载请标明本文出处:***http://blog.csdn.net/tonyshengtan ***,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管,欢迎共同开发:http ...

  2. jQuery_页面加载问题

    运行如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. JavaWeb_初识监听器Listener

    监听器(listener):对项目起到监听的作用,它能感知到包括request(请求域),session(会话域)和applicaiton(应用程序)的初始化和属性的变化 监听器是Servlet规范中 ...

  4. ZooKeePer总汇

    一.什么Zookeeper Zookeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization) ...

  5. 两个html之间进行传值,如何进行?

    function turnto(){ var getval=document.getElementById("text").value; turngetval=escape(get ...

  6. 环信及时通讯 Laravel 扩展包

    laravel-easemob 环信及时通讯 laravel 包开发,用于环信用户.群.聊天室等功能 github 地址   安装 加载包 "link1st/laravel-easemob& ...

  7. vue父子组件

    vue父子组件 新建 模板 小书匠  为什么要厘清哪个是父组件,哪个是子组件? 一开始浏览器接收和要显示的数据非常少,此时无需划分区域进行布局.随着页面数据量的增加,如果单纯一个窗口来加载和显示数据, ...

  8. Activity的onSaveinstaceState()保存fragment状态

    Activity的onCreat方法: @Override protected void onCreate(Bundle savedInstanceState) { FragmentManager s ...

  9. 自定义ListView实现下拉刷新,下拉加载的功能

    package com.loaderman.myrefreshlistviewdemo; import android.content.Context; import android.util.Att ...

  10. 非GUI运行Jmeter,jtl文件没有响应数据的解决办法

    一.问题 Jmeter官方一直强调要在非GUI模式下运行Jmeter:Run your JMeter test in command-line non-GUI mode. 但在非GUI模式下运行生成的 ...