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的更多相关文章

  1. 从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)

    自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...

  2. 利用webpack打包自己的第一个Vue组件库

    先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...

  3. 自定义Vue组件打包、发布到npm以及使用

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附 ...

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

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

  5. 如何从0开发一个Atom组件

    最近用Atom写博客比较多,然后发现一个很严重的问题..没有一个我想要的上传图片的方式,比如某乎上边就可以直接copy/paste文件,然后进行上传.然而在Atom上没有找到类似的插件,最接近的一个, ...

  6. 从零开始封装React UI 组件库并发布到NPM

    github 开源地址:zswui github 说明文档:wiki 1.新建目录wui (1)进入到 wui 目录 执行 npm init 命令初始化项目.更具提示信息填充将会生成的 package ...

  7. Vue搭建组件库并发布到 npm

    https://www.jianshu.com/p/72d303449abc

  8. 将 Vue 组件库发布到 npm

    制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...

  9. vue组件库(一):前期准备工作

    前言 将近期项目内自行开发一个vue组件,做个总结,记录下自己的思维过程~~~ 正文 接到这个任务后,还是要做些准备工作的. 主要内容如下: 1.优化下所在团队前端开发流程 服务器搭建gitlab,采 ...

随机推荐

  1. 两数之和_LeetCode_1

    LeetCode_1原题链接:https://leetcode-cn.com/problems/two-sum/ 剑指 Offer 57原题链接: https://leetcode-cn.com/pr ...

  2. 中文版Postman

    作为软件开发从业者,API 调试是必不可少的一项技能,在这方面 Postman 做的非常出色.但是在整个软件开发过程中,API 调试只是其中的一部分,还有很多事情 Postman 无法完成,或者无法高 ...

  3. [源码解析] TensorFlow 分布式 DistributedStrategy 之基础篇

    [源码解析] TensorFlow 分布式 DistributedStrategy 之基础篇 目录 [源码解析] TensorFlow 分布式 DistributedStrategy 之基础篇 1. ...

  4. Ubuntu 20.0.4 安装 NVIDIA N卡 驱动 画面撕裂 解决方法

    电脑 联想 Y7000 系统 Ubuntu 20.0.4 显卡 NVIDIA 1050TI 以下操作需要管理员权限 编辑文件,如果没有新建一个 /lib/modprobe.d/nvidia-graph ...

  5. 攻防世界-MISC:神奇的Modbus

    这是攻防世界高手进阶区的第三题,题目如下: 点击下载附件一,得到一个流量包,题目中提到的modbus,百度百科的解释如下: 用wireshark打开流量包,搜索modbus 然后鼠标右键选择追踪流,再 ...

  6. 基础学习:MYSQL命令大全(持续更新中---最近一次:2019.12.6)

    启动mysql : mysql -hlocalhost -uroot -p创建数据库:create database 数据库名字;指定要操作的数据库:use 数===据库名字;查看数据表建表语句:sh ...

  7. 『现学现忘』Git基础 — 19、Git中忽略文件

    目录 1.忽略文件说明 2.忽略文件的原则 3..gitignore忽略规则 1.忽略文件说明 有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们到本地版本库,通常都是些自动生成的文件. ...

  8. 【CSAPP】Performance Lab 实验笔记

    perflab这节的任务是利用书中知识,来对图像处理中的Rotate和Smooth操作函数进行优化.这次没对上电波,觉得学了一堆屠龙之技.于我个人理解,现在计算机配置比以前高多了,连SWAP分区都几近 ...

  9. 基本命令学习 -(3)Linux压缩和解压缩命令汇总

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 前言 Linux下的压缩和解压缩工具比较多,有时经常记不住,这里给大家汇总一下,方便大家查阅. ...

  10. CentOS 下 MySQL 8.0 安装部署,超详细!

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! Mysql8.0安装 (YUM方式) 首先删除系统默认或 ...