Vue封装组件，发布到npm仓库

 一、环境准备。

---

1.初始化Vue项目。

vue create XXX（工程名字）

2.运行项目。

npm run serve

二、组件封装。

1.新建一个文件夹。

因为我们可能会封装多个组件，所以在src下面新建一个文件夹用来存放所有需要上传的组件。

2.编写组件代码。

就是项目中在components文件夹中写的组件形式，写完之后我们引用到App.vue组件里面验证一下，看是否组件可用。

3.使用Vue插件模式。

这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。

这个方法会在你使用Vue.use()时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。

在上面新建好的文件夹目录下新建index.js文件。

代码如下：

/index.js;
import xxxx from "../xx/xx/xx.vue"; // 引入封装好的组件
const coms = [xxxx]; // 如果有多个其它组件,都可以写到这个数组里

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

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

三、组件打包。

修改项目中的package.json文件，配置打包命令：

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

打包的命令解释：

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

执行打包命令：

上面我们配置的是package（这个名字可以随便起），所以我们执行打包命令为：

npm run package

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

四、组件发布。

1.初始化package.json。

想要发布到npm仓库，我们还得在上面新建的文件夹下初始化一个package.json文件。进入该文件夹目录，执行命令：

npm init -y

2.发布到npm仓库。

1.首先要有npm仓库的账号（如果没有去注册，要注意记住用户名、密码和邮箱，一会发布的时候会用到。）

2.设置npm源

为了防止本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，是要用npm官方源。所以我们把npm源切换为官方得源，命令如下：

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

3.添加npm用户

进入上面创建的文件夹目录（因为我们只发布该文件夹中的组件），添加npm用户，执行命令：

npm adduser

回车按照步骤依次输入npm用户名、密码和邮箱。记着登录注册npm账号所用的邮箱，还会输入一个一次性验证码，由npm官方发送到你的邮箱。

4.发布npm

在上面新建的文件夹目录下执行命令：

npm publish

这里我遇到一个报错发布失败，是名字重复了，修改名字之后再次执行发布命令。发布成功后，我们就可以到npm官网上查看自己发布得npm包。同时也会收到npm官方的邮件。

五、从npm安装使用。

直接执行安装命令：

npm install xxxx//组件名称

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

import XXX from "xxxx";
import "../node_modules/xxxx/xxxx.css";//引入css路径
//安装成功后css文件就会在node_modules依赖包中



Vue.use(XXX);

全局注册后就可以在项目中直接使用了！

到这里一个组件的封装并发布到npm上就结束了。