工作中遇到一个需求，要将一个非常复杂的项目，改成插件并发布到npm，供其他同事使用。该组件是基于vue-cli 4.x脚手架搭建的（vue-cli 3.x同样适用）。具体方法如下：
一、调整项目结构
1、用 vue-cli 创建一个 default 项目（由于是将项目改造成插件，这一步已经在项目开始时做过了）
当前的项目目录是这样的：
2、将 src 改为插件名称，如 yx-form-create，将里面的 App.vue 重命名，如 yx-form-create.vue，将之前的main.js中引入的插件，统统移入到这个文件内，因为main.js将用来编写插件的install方法，同时将 name 值改成插件名（很重要），类似下面的代码：
3、修改main.js代码，导出插件：
// 导入单个组件
import yxFormCreate from "./yx-form-create.vue";
// 定义 install 方法
const install = function(Vue) {
if (install.installed) return;
install.installed = true;
// 遍历并注册全局组件
Vue.component(yxFormCreate.name, yxFormCreate);
};
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
// 导出的对象必须具备一个 install 方法
install,
yxFormCreate
};4、新建 test 文件夹，作为测试使用，在 test 下分别新建 main.js 和 App.vue
最终目录结构如下：
test/main.js代码：
import Vue from "vue";
import App from "./App.vue";
// 引入自定义的插件
import yxFormCreate from "../yx-form-create/main";
Vue.use(yxFormCreate);
new Vue({
render: h => h(App)
}).$mount("#app");App.vue代码：
<template>
<div id="app">
<!--使用自定义的插件-->
<yx-form-create />
</div>
</template>
<script>
export default {
name: "App"
};
</script>二、修改配置
启动项目的时候，默认入口文件是 src/main.js
将 src 目录改为 test 之后，就需要重新配置入口文件
在根目录下找到 vue.config.js 文件（没有就创建它）：
// vue.config.js
module.exports = {
// 将 test 目录添加为新的页面
pages: {
index: {
// page 的入口
entry: 'test/main.js'
}
}
}完成这一步之后，运行 npm run serve 启动它进行测试插件是否有问题
三、打包组件
vue-cli 3.x、4.x 提供了构建库的命令，所以这里不需要再为 yx-form-create 目录配置 webpack，主要需要四个参数：
target: 默认为构建应用，改为 lib 即可启用构建库模式
name: 输出文件名
dest: 输出目录，默认为 dist
entry: 入口文件路径，默认为 src/App.vue，这里改为 yx-form-create/main.js
基于此，在 package.json 里的 scripts 添加一个 lib 命令
// pageage.json
{
"scripts": {
"lib": "vue-cli-service build --target lib --name yx-form-create --dest dist yx-form-create/main.js"
}
}然后执行 npm run lib 命令，编译组件
四、准备发布
首先需要在 package.json 添加组件信息
name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
keyword：关键字，以空格分割；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议
然后创建 .npmignore 文件，设置忽略文件
该文件的语法和 .gitignore 的语法一样，设置发布到 npm 时忽略哪些目录或文件
.DS_Store node_modules/ examples/ packages/ public/ vue.config.js babel.config.js *.map *.html # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw*
五、发布到 npm
如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来
npm config set registry http://registry.npmjs.org
如果没有 npm 账户，可以通过 npm adduser 命令创建一个账户，或者到 npm 官网注册
如果在官网注册的账户，或者以前就有账户，就使用 npm login 命令登录
在发布之前，一定要确保组件已经编译完毕，而且 package.json 中的入口文件（main）的路径正确
一切就绪，发布组件：
npm publish