如何从0开发一个Vue组件库并发布到npm
1、新建文件夹在终端打开执行 npm init -y
生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等
{
"name": "vuecomponentdi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2、建立目录结构
目录结构如下
-- vueComponentDi
-- packages
-- button
-- index.js
-- index.vue
-- toast
-- index.js
-- index.vue
-- index.js
-- package.json
3、本地调试
- vueComponentDi/index.js
export default function(){
console.log('本地调试')
}
- 新建一个vue项目
vue create testvue
在testvue下的package.json下的测试依赖devDependencies添加vueComponentDi/index.js绝对地址
"devDependencies": {
...
"vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根据自己实际项目地址填写
...
}
- 执行npm link
在testvue执行npm link将vuecomponentdi软链接到node_modules中
- vuecomponentdi安装Eslint
由于testvue引入组件会进行Eslint检测,不安装会报错(testvue关闭Eslint可省略这一步)
安装方法:
npm install eslint@6.7.2 --save-dev
./node_modules/.bin/eslint --init
- 在testvue使用vuecomponentdi
import test from "vuecomponentdi"
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import test from "vuecomponentdi"
export default {
name: 'Home',
components: {
HelloWorld
},
created(){
test()
}
}
</script>
控制台打印>本地调试
4、开发一个button组件
- button模块:进入vueComponentDi/packages/button/index.vue
type只支持传入primary属性.
v-on = "$listemers"表示包含了父作用域中的(不含.native修饰符的) v-on事件监听器,它可以通过v-on="$listerners"传入内部组件
<template>
<div>
<button class="di-button" v-on="$listeners" :class="[type?`di-button--${type}`:'']"><slot></slot></button>
</div>
</template>
<script>
export default {
name:"di-button",
props:{
type:String
}
}
</script>
<style>
.di-button{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.di-button:focus, .di-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.di-button:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: none;
}
.di-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.di-button--primary:focus, .di-button--primary:hover {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
.di-button--primary.is-active, .di-button--primary:active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
}
</style>
- button模块导出:进入vueComponentDi/packages/button/index.js
如果导出一个带有install函数的对象,则在Vue2中可以直接使用Vue.use(xx)调用此函数,既执行 Vue.component(name,option)创建了一个组件
import button from "./index.vue"
button.install=(Vue)=>{
Vue.component(button.name,button)
}
export default button
- 聚合导出button:进入vueComponentDi/index.js
因为开发的组件不止一个,所以需要在入口文件统一导出
import diButton from "./packages/button"
export {
diButton
}
- 在testvue使用
<template>
<div class="home">
<di-button type="primary">按钮</di-button>
</div>
</template>
<script>
// @ is an alias to /src
import Vue from 'vue'
import {diButton} from "vuecomponentdi"
Vue.use(diButton)
export default {
name: 'Home'
}
</script>
5、开发一个toast弹窗
- toast模块:vueComponentDi/packages/toast/index.vue
type只支持warning和success
<template>
<div class="di-toast" :class="`di-toast--${type}`" v-if="show">
{{message}}
</div>
</template>
<script>
export default {
data(){
return {
message:'',
show:false,
type:''
}
}
}
</script>
<style>
.di-toast{
width: 60%;
width: 200px;
background: rgb(15, 15, 15);
padding:3px;
text-align: center;
color: #fff;
border-radius: 10px;
position: fixed;
left: calc(50% - 100px);
top: 200px;
}
.di-toast--warning{
background: #FDF6EC;
color: #E6A28B;
}
.di-toast--success{
background: #F0F9EB;
color: #93C26D;
}
</style>
- toast模块导出:vueComponentDi/packages/toast/index.js
因为toast弹窗需要在vue中支持this.$toast调用,所以用了Vue.extend方法,这个 API 在日常开发中很少使用,一般在开发组件的时候它才能派上用场,官方定义:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象
import toast from './index.vue'
toast.install = (Vue) => {
const toastConstructor = Vue.extend(toast);//使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
let $vm = new toastConstructor();//将这个子类实例化
let $el = $vm.$mount().$el;//$vm执行$mount()手动挂载会返回一个带有$el的对象,$el就是一个dom对象
document.querySelector("body").appendChild($el);//将这个dom对象添加到body中
//在Vue原型上注入$toast方法
Vue.prototype.$toast = (option) => {
$vm.show = true
if (!(option instanceof Object)) {
//如果传的不是对象直接弹出
$vm.message = option
} else {
$vm.message = option.message
$vm.type = option.type
}
setTimeout(() => {
$vm.show = false
}, 2000)
}
}
export default toast
- 聚合导出:vueComponentDi/index.js
import diButton from "./packages/button"
import toast from "./packages/toast"
export {
diButton,
toast
}
- vuetest中使用toast
<template>
<div class="home">
<di-button type="primary" @click="toast">按钮</di-button>
</div>
</template>
<script>
// @ is an alias to /src
import Vue from "vue";
import { diButton, toast } from "vuecomponentdi";
Vue.use(diButton);
Vue.use(toast);
export default {
name: "Home",
methods: {
toast() {
// this.toast("这是一个普通弹窗");
// this.$toast({
// message: "这是一个成功弹窗",
// type: "success",
// });
this.$toast({
message: "这是一个警告弹窗",
type: "warning",
});
},
},
};
</script>
6、发布到npm
- 公有配置
组件开发完成需要发布到npm以便于别人使用;因为发布的是公有包,所以需要在vueComponentDi/package.json中配置
"publishConfig": {
"access": "public"
},
完整package.json:
{
"name": "vuecomponentdi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.7.2",
"eslint-plugin-vue": "^8.2.0"
},
"publishConfig": {
"access": "public"
}
}
- 发布
npm发布很简单,只需要两个命令:
npm login
npm publish
执行npm login需要你有npm账号,可以到 npm官网 注册
发布完成之后就可以在任何一个vue2项目中安装使用了:
npm install vuecomponentdi
git地址: vue组件开发
如何从0开发一个Vue组件库并发布到npm的更多相关文章
- 从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)
自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...
- 利用webpack打包自己的第一个Vue组件库
先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...
- 自定义Vue组件打包、发布到npm以及使用
本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附 ...
- 【万字长文】从零配置一个vue组件库
简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...
- 如何从0开发一个Atom组件
最近用Atom写博客比较多,然后发现一个很严重的问题..没有一个我想要的上传图片的方式,比如某乎上边就可以直接copy/paste文件,然后进行上传.然而在Atom上没有找到类似的插件,最接近的一个, ...
- 从零开始封装React UI 组件库并发布到NPM
github 开源地址:zswui github 说明文档:wiki 1.新建目录wui (1)进入到 wui 目录 执行 npm init 命令初始化项目.更具提示信息填充将会生成的 package ...
- Vue搭建组件库并发布到 npm
https://www.jianshu.com/p/72d303449abc
- 将 Vue 组件库发布到 npm
制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...
- vue组件库(一):前期准备工作
前言 将近期项目内自行开发一个vue组件,做个总结,记录下自己的思维过程~~~ 正文 接到这个任务后,还是要做些准备工作的. 主要内容如下: 1.优化下所在团队前端开发流程 服务器搭建gitlab,采 ...
随机推荐
- 两数之和_LeetCode_1
LeetCode_1原题链接:https://leetcode-cn.com/problems/two-sum/ 剑指 Offer 57原题链接: https://leetcode-cn.com/pr ...
- 中文版Postman
作为软件开发从业者,API 调试是必不可少的一项技能,在这方面 Postman 做的非常出色.但是在整个软件开发过程中,API 调试只是其中的一部分,还有很多事情 Postman 无法完成,或者无法高 ...
- [源码解析] TensorFlow 分布式 DistributedStrategy 之基础篇
[源码解析] TensorFlow 分布式 DistributedStrategy 之基础篇 目录 [源码解析] TensorFlow 分布式 DistributedStrategy 之基础篇 1. ...
- Ubuntu 20.0.4 安装 NVIDIA N卡 驱动 画面撕裂 解决方法
电脑 联想 Y7000 系统 Ubuntu 20.0.4 显卡 NVIDIA 1050TI 以下操作需要管理员权限 编辑文件,如果没有新建一个 /lib/modprobe.d/nvidia-graph ...
- 攻防世界-MISC:神奇的Modbus
这是攻防世界高手进阶区的第三题,题目如下: 点击下载附件一,得到一个流量包,题目中提到的modbus,百度百科的解释如下: 用wireshark打开流量包,搜索modbus 然后鼠标右键选择追踪流,再 ...
- 基础学习:MYSQL命令大全(持续更新中---最近一次:2019.12.6)
启动mysql : mysql -hlocalhost -uroot -p创建数据库:create database 数据库名字;指定要操作的数据库:use 数===据库名字;查看数据表建表语句:sh ...
- 『现学现忘』Git基础 — 19、Git中忽略文件
目录 1.忽略文件说明 2.忽略文件的原则 3..gitignore忽略规则 1.忽略文件说明 有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们到本地版本库,通常都是些自动生成的文件. ...
- 【CSAPP】Performance Lab 实验笔记
perflab这节的任务是利用书中知识,来对图像处理中的Rotate和Smooth操作函数进行优化.这次没对上电波,觉得学了一堆屠龙之技.于我个人理解,现在计算机配置比以前高多了,连SWAP分区都几近 ...
- 基本命令学习 -(3)Linux压缩和解压缩命令汇总
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 前言 Linux下的压缩和解压缩工具比较多,有时经常记不住,这里给大家汇总一下,方便大家查阅. ...
- CentOS 下 MySQL 8.0 安装部署,超详细!
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! Mysql8.0安装 (YUM方式) 首先删除系统默认或 ...