话不多说马上开始 发布属于自己的npm包 GO GO GO ！
- 注册属于自己的npm账号 登录npm官网
- 准备好环境
- Vue封装组件并发布到npm仓库
使用Vue框架进行开发，组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用，甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用，比如iview、element-ui这一类的组件库。但是每个公司的业务场景可能不同，开发人员还是得必须封装自己得组件，如果换了一个项目，那么我们就只能复制组件代码到新的项目里面去了，这样稍显麻烦，其实我们可以将组建上传到npm仓库，要用的时候可以直接从npm安装使用
1. 初始化Vue项目
vue create my-app
2. 运行项目
cd my-app npm run serve
- 准备封装小组件-通用方法
1. 新建package文件夹
在src下面新建一个package文件夹用来存放所有需要上传的组件和方法。
这里我们打算封装1个组件：zsl-button ，1个通用方法：public-js ，所以在package文件夹下面分别新建了存放两个组件代码的文件夹。
2. 编写组件代码和通用方法
这里我们就以zsl-button组件为例，任意编写一点代码，代码如下：
<template>
<!-- package/zsl-button/index.vue -->
<div>
<button>test按钮</button>
</div>
</template>
<script>
export default {
name: "zsl-button", //组件名
};
</script>
<style scoped>
button {
z-index: 1;
position: relative;
font-size: inherit;
font-family: inherit;
color: white;
padding: 0.5em 1em;
outline: none;
border: none;
background-color: hsl(236, 32%, 26%);
overflow: hidden;
transition: color 0.4s ease-in-out;
}
button::before {
content: "";
z-index: -1;
position: absolute;
top: 100%;
right: 100%;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: #3cefff;
transform-origin: center;
transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
transition: transform 0.45s ease-in-out;
}
button:hover {
cursor: pointer;
color: #161616;
}
button:hover::before {
transform: translate3d(50%, -50%, 0) scale3d(15, 15, 15);
}
</style>
这里我们就以public-js方法为例，任意编写一点代码，代码如下：index.js
// package/public-js/index.js
import { handleFirstUpperCase, handleDrawDownHump } from "./letter.js";
import { handleRoundOff } from "./num.js";
export default { handleFirstUpperCase, handleDrawDownHump, handleRoundOff };
letter.js方法
// package/public-js/letter.js
// 处理首字母大小
export function handleFirstUpperCase(str) {
return str.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
}
num.js方法
// package/public-js/num.js
// 四舍五入Math.round(number)
export function handleRoundOff(val) {
return val && Math.round(val);
}
然后我们引用到App.vue组件里面验证一下，看是否组件可用，代码如下：
<!-- src/App.vue -->
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<ZSLButton />
<p>字母:{{ msg }}</p>
<p>
首字母大写：<span>{{ handleFirstUpperCase(msg) }}</span>
</p>
<p>数字{{ nums }}</p>
<p>
四舍五入：<span>{{ handleRoundOff(nums) }}</span>
</p>
</template>
<script>
import { ref, defineComponent } from "vue";
import ZSLButton from "./package/zsl-button/index.vue";
import publicjs from "./package/public-js/index.js";
export default defineComponent({
components: {
ZSLButton,
},
setup() {
const msg = ref("setup script");
const nums = ref(17.6);
const { handleFirstUpperCase, handleRoundOff } = publicjs;
return { msg, nums, handleFirstUpperCase, handleRoundOff };
},
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
p {
margin: 40px 0;
}
span {
color: #1677ff;
}
</style>
3. 使用Vue插件模式
这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。这个方法会在你使用Vue.use(plugin)时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
在package目录下新建index.js文件，代码如下：
//package/index.js
import ZSLButton from "../package/zsl-button/index.vue"; // 引入封装好的组件
import publicjs from "../package/public-js/index.js"; // 引入封装好的方法
const coms = [ZSLButton]; // 将来如果有其它组件,都可以写到这个数组里
// 批量组件注册
const install = function (Vue) {
coms.forEach((com) => {
Vue.component(com.name, com);
});
};
export default { install, publicjs }; // 这个方法以后再使用的时候可以被use调用
4. 组件打包
到这里为止，我们的组件封建基本就完成了，当然组件封装成什么样得看自己得业务需求了，接下来我们就需要将组件进行打包了。
修改我们项目得package.json文件，配置打包命令：
package": "vue-cli-service build --target lib ./src/package/index.js --name zsl-ui --dest zsl-ui
打包命令解释：
- --target lib 关键字 指定打包的目录
- --name 打包后的文件名字
- --dest 打包后的文件夹的名称
然后执行打包命令：
npm run package
打包执行完成后我们项目目录下就会多出一个zsl-ui文件夹，存放的是打包后的文件。
- 发布到npm
1. 初始化package.json
想要发布到npm仓库，我们还得在zsl-ui文件夹下初始化一个package.json文件。进入zsl-ui目录，执行命令：
npm init -y
由于这里我们只是测试，所以我不需要更改package.json文件，如果是生产的话，最好加上版本描述和版本号等等，其中name字段便是我们上传到npm仓库后的名称。
2. 发布到npm仓库
1.注册账号
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。
2.设置npm源
有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：
npm config set registry=https://registry.npmjs.org
3.添加npm用户
进入zsl-ui目录，添加npm用户，执行命令：
npm adduser
这里会让你填写用户名等等，如果之前设置过即可跳过此步。
4.发布npm
在zsl-ui目录下执行命令：npm publish
如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可到npm光网上查看自己发布得npm包：
- 从npm安装使用
直接执行安装命令：npm install zsl-ui-test // 由于名字重复，改了个名字
- main.js引用注册，代码如下：
//src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import TestUi from "zsl-ui-test"; //引入包
import "../node_modules/zsl-ui-test/zsl-ui.css"; //引入包样式
const app = createApp(App);
app.config.globalProperties.public = TestUi.publicjs; //公共方法
app.use(TestUi.install); //注册组件
app.mount("#app");
这里单独引用了css，就和element-ui一样需要单独引入样式文件。
修改App.vue文件，直接使用组件zsl-button，首字母大写等、四舍五入方法 代码如下：
<!-- src/App.vue -->
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<zsl-button />
<p>字母:{{ msg }}</p>
<p>
首字母大写：<span>{{ handleFirstUpperCase(msg) }}</span>
</p>
<p>数字{{ nums }}</p>
<p>
四舍五入：<span>{{ handleRoundOff(nums) }}</span>
</p>
</template>
<script>
import { getCurrentInstance, ref, defineComponent } from "vue";
export default defineComponent({
setup() {
const { proxy } = getCurrentInstance();
const msg = ref("setup script");
const nums = ref(17.6);
const { handleFirstUpperCase, handleRoundOff } = proxy.public;
return { msg, nums, handleFirstUpperCase, handleRoundOff };
},
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
p {
margin: 40px 0;
}
span {
color: #1677ff;
}
</style>
展示如下：
到这里我们的组件和方法就封装好了，并且可以直接从npm仓库下载使用。
总结
总体说来Vue组件封装发布到npm仓库整体难度不大，主要是理解Vue的install方法以及打包相关知识，其实最重要的还是如何封装一个适用范围广，扩展性高的公用组件。
此项目源码地址 github.com/zsl1549/zsl…
欢迎小伙伴 一键3连 star fork 关注不迷路
有不清楚的小伙伴欢迎留言
