一般多个项目使用一些公共组件的时候，我们没必要在每个项目里写公共组件代码，我们可以将公共组件封装成一个库，上传至npm，这样我们在项目中使用就可以直接从npm下载直接使用。当然我们也可以搭建自己本地的npm镜，而本文主要讲述上传npm。
创建一个新的vue项目
vue create catui
在src目录下新建package文件放置我们所写的公共组件
写一个button的公共组件
在package下新建bin-button文件，index.js文件，并在bin-button文件下新建index.vue
目录：/catui/src/package/bin-button/index.vue
<template>
<button @click="handleClick" :disabled='disabled'>
<slot></slot>
</button>
</template>
<script>
export default {
name: "BinButton",
props: {
disabled: Boolean
},
methods: {
handleClick(evt) {
this.$emit('click', evt);
}
}
};
</script>
目录：/catui/src/package/index.js
出口文件：引入封装好的组件进行批量注册，然后导出。
// 引入封装好的组件
import BinButton from "../package/bin-button/index.vue"; /
// 将来如果有其它组件,都可以写到这个数组里
const coms = [BinButton];
// 批量组件注册
const install = function (Vue) {
coms.forEach((com) => {
Vue.component(com.name, com);
});
};
export default install; // 这个方法以后再使用的时候可以被use调用
为什么导出为install? 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为install 方法。install 方法调用时，会将 Vue 作为参数传入。
package.json 作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json, 我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下,代码如下:
组件库上传npm需要按照npm规则来编写package.json。
{
"name": "catui", //包名
"version": "0.1.1", //版本号
"description": "", //介绍
"author": "cat", //作者
"main": "caui/xui.umd.min.js", //入口js
"license": "ISC", //许可证
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build": "vue-cli-service build --target lib ./src/package/index.js --name cat-ui --dest cat-ui",
},
}其中
- target lib： 启动文件的路径
- name：打包后生成的文件名
- dest： 打包后生成的文件夹名
打包项目
打包后的目录如下：
上传npm
首先注册npm账号，后登录
npm login
//输入账号、密码、邮箱
升级版本（按需求）
"version": "0.1.4" <=> [major].[minor]. patch
对应的版本为大版本|中版本|小版本
npm version patch （升级小版本号）
npm version minor（升级中版本号）
npm version major （升级大版本号）
发布到npm
npm publish
如果有报错
npm publish --access public
查看镜像源，如果之前有修改过npm的源需要重新设置
npm get registry
//设置镜像源（如果不是下面的源，则需要执行下面的命令）
npm config set registry=https://registry.npmjs.org
【特别提醒】：确保本地源服务是 registry.npmjs.org，国内大家都喜欢使用taobao镜像源，但是发布不能发到该服务器上。本人使用 nrm 工具进行镜像源的管理和切换。
可以直接在npm官网搜索到
安装并使用
安装
yarn add catui
在main,js中引入
import catui from "catui"
vue.use(catui)
app.vue中使用
<bin-button disabled></bin-button>
<bin-button></bin-button>
下图可以看出我们设置disabled属性生效了
