（保姆级）vue封装并发布到npm仓库在多个项目使用

最近小编在面试的时候有面试官问到了这个问题并且问到了挺多关于封装的相关，所以小编未来将会做一个封装系列进行更新

1.首先讲一下封装，封装组件我们先初始化一个vue项目

（1）初始化vue项目
vue create my-app

（2）项目运行

npm run serve

运行好的效果是这样的

2.在src项目下新建一个package的文件夹，因为我们可能不止要封装一个组件，所以我们以后封装的组件都放在这个文件夹下面方便管理和寻找

然后我们在packag里面去创建两个文件夹代表我们的两个组件（一个是pig-button，另外一个是pig-input）

为了方便大家我把代码放这

//package/pig-button/index.vue
<template>
  <div>
    <button>我是测试按钮</button>
  </div>
</template>
<script>
export default {
  name: "pig-button", //组件名
};
</script>
<style scoped>
button {
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
</style>

然后我们要先引用到App.vue里面验证一下看组件能不能用，不能用的话发到npm也没用是吧

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <pig-button></pig-button>
  </div>
</template>

<script>
import PigButton from './package/pig-button/index.vue'

export default {
  name: 'App',
  components: {
    PigButton
  }
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

最终显示出来的效果是这样的，下面会跳出来一个测试按钮

3.使用bue的插件模式

这一步是封装组件的重点，用到的是vue提供的一个公开方法：install。这个方法会在你使用Vue.use(plugin)的时候被调用，这样使我们的插件注册到了全局，在子组件的任何地方都可以去使用了。

4.在package目录下载新建一个index.js文件，代码如下：

//package/index.js
import PigButton from "../package/pig-button/index.vue"; // 引入封装好的组件
const coms = [PigButton]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};

export default install; // 这个方法以后再使用的时候可以被use调用

上传代码主要的一项工作就是要将我们封装好的组件注册为全局组件，用到了vue.component()方法，当使用到Vue.use()的时候，我们的这个install方法就会执行了。

4.组件打包

到这里为止我们的组件封装就是基本完成了，要封装什么组件看大家自己的业务需求去封装就好了，接下来我们开始打包教程。

修改我们项目得package.json文件，配置打包命令：

"package": "vue-cli-service build --target lib ./src/package/index.js --name pig-ui --dest pig-ui"

大家肯定会好奇这个打包指令是啥意思对吧，那解释一下

• --target lib 关键字 指定打包的目录
• --name 打包后的文件名字
• --dest 打包后的文件夹的名称

然后我们就开始执行打包的命令

npm run package

打包执行完成后我们项目目录下就会多出一个pig-ui文件夹，存放的是打包后的文件。

到这里打包完成。

5.发布到npm

首先我们要初始化package.json

想要发布到npm仓库的话，我们还得在pig-ui文件夹下初始化一个package.json文件。进入到pig-ui目录，执行命令。

npm init -y

竟我们只是测试对吧，所以我这里就不需要更改package.json文件，但我们要是生产的话，就最好加上版本描述啊还有版本号等等，其中name字段就是我们上传到npm仓库的名称。

6.发布到npm仓库

1.注册账号

想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

2.设置npm源

可能有些老表本地的npm镜像源用的是淘宝镜像或者其他的，但是想要发布npm包，我们就要把我们的npm源切尾官方源，命令如下：

npm config set registry=https://registry.npmjs.org

（npm config set registry=https://registry.npmjs.org  这个才是完整的，上面这个因为有// csdn默认是注释了）

3.添加npm用户

进入pig-ui目录，添加npm用户，执行命令：

npm adduser

这里会让你填写用户名等等，如果之前设置过即可跳过此步。

4.发布npm

在pig-ui目录下执行命令：

npm publish

如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可到npm官网上查看自己发布得npm包：

7.从npm安装使用

直接执行安装命令：

npm install pig-ui-test // 由于名字重复，改了个名字

然后在main.js引用注册，代码如下：

import PigUi from "pig-ui-test";
import "../node_modules/pig-ui-test/pig-ui.css";
Vue.use(PigUi);

这里单独引用了css，就和element-ui一样需要单独引入样式文件。

修改App.vue文件，直接使用组件pig-button，代码如下

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <pig-button></pig-button>
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

展示如下：

到这里我们的组件就封装好了，并且可以直接从npm仓库下载使用。

总结

总体说来Vue组件封装发布到npm仓库整体难度不大，主要是理解Vue的install方法以及打包相关知识，其实最重要的还是如何封装一个适用范围广，扩展性高的公用组件。

都看到这里啦，关注一下吧么么哒