步骤

创建 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. 【BZOJ3261】最大异或和(可持久化Trie)

    题意: 思路:可持久化Trie板子题,支持序列插入和询问 #include<bits/stdc++.h> using namespace std; typedef long long ll ...

  2. Unity3D_(游戏)双人3D坦克_简易版

    双人3D坦克实现 player1: WSAD控制上下左右 空格键发射炮弹 player2: IKJL可控制上下左右 B键发射炮弹 每个坦克只有100hp,子弹击中1次扣30hp,hp时时显示在坦克上 ...

  3. [CSP-S模拟测试]:集合合并(记忆化搜索)

    题目传送门(内部题133) 输入格式 第一行一个正整数$n$. 第二行$n$个正整数$a_i$,表示一开始有$S_i=\{a_i\}$ 输出格式 输出一个非负整数表示最大的收益之和 样例 样例输入: ...

  4. Spring boot之MyBatis

    文章目录1. 环境依赖2. 数据源2.1. 方案一 使用 Spring Boot 默认配置2.2. 方案二 手动创建3. 脚本初始化4. MyBatis整合4.1. 方案一 通过注解的方式4.1.1. ...

  5. 【学习】windows 下PostgreSQL导入sql文件

    在软件的安装目录的bin文件下打开命令行工具 输入: psql -d 数据库名称 -h 数据库地址 -p  5432  -U  postgres  -f  sql文件(E:\Config\SQL\iS ...

  6. SHELL中执行Oracle SQL语句查询性能视图

    数据库日志是否报错信息 vi check_log.sh #!/bin/bash # Created : 2019.10.10 # Updated : # Author : # Description ...

  7. C# 强命名程序集,防止dll被修改,混淆下发布

    未能加载文件或程序集“Jonckers.Service.RedisCacheEngineExtend, Version=1.0.0.0, Culture=neutral, PublicKeyToken ...

  8. jsp死循环

    查看多重循环的  i    或者    j    是否写错

  9. Difference Between Currency Swap and FX Swap

    [z]https://www.differencebetween.com/difference-between-currency-swap-and-vs-fx-swap/ Currency Swap ...

  10. Selenium 2自动化测试实战17(警告框处理)

    一.警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,只需要使用switch_to_alert()方法定位到alert/confir ...