关于组件库的制作过程，这里就用我自己封装的组件库为例，由于组件库的制作对于目录结构没有特殊要求，为了能更清晰的介绍，这里就参考elementui的目录结构。
首先我们使用”npm create vfan-ui”初始化一个项目。我们可以把src文件夹重命名成examples，专门用来存放测试的例子，此目录不是组件库的组成部分，不是必须的，可以不要。
再新建一个packages文件夹专门存放组件库相关的内容。这时，由于修改了项目默认的入口文件结构，导致项目就无法启动了，我们按照以下步骤操作即可。
一、packages处理成插件
1.新建一个vue.config.js文件，然后在该文件里面修改项目的入口文件，和指定babel的编译目录，具体配置和介绍如下：
vue.config.js文件:
const path = require("path");
module.exports = {
pages: {
index: {
// 修改项目的入口文件
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html"
}
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.module
.rule("js")
.include.add(path.resolve(__dirname, "packages"))
.end()
.use("babel")
.loader("babel-loader")
.tap(options => {
// 修改它的选项...
return options;
});
}
};这时项目就可以运行了。
2.接下来我们开始在packages文件夹里开发一个个组件。将来需要打包的组件、字体文件、图片和样式文件等都需要放到packages文件夹下。
3.在packages目录里面新建index.js文件，作为整个包的入口，代码示例如下：
// 整个包的入口
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
// 统一导出
// 导入颜色选择器组件
import VButton from "./button";
import VCard from "./card";
import "./theme/index.scss";
// 存储组件列表
const components = [VButton,VCard];
const install = function(Vue) {
// 全局注册所有的组件
components.forEach(item => {
Vue.component(item.name, item);
});
// 指令
Vue.use(vueDrag);
};
// 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
install
};4.然后在项目的examples中的main.js里直接引入进行测试。
import VfanUI from "./../packages/"; import "./../packages/theme/index.scss"; Vue.use(VfanUI);
关于install和use的使用请参阅https://cn.vuejs.org/v2/api/#Vue-use
二、Vue组件库的制作
我们需要将上面的vue插件制作成vue组件库，还需要做如下配置。
1、在package.json中的scripts对象中添加如下代码：
"lib": "vue-cli-service build --target lib packages/index.js"
注：packages/index.js是指定的组件库入口文件
关于构建组件库配置详细见https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93
2.发布到npm前，还要修改package.json文件，保证四点如下：
"name": "vfan-ui", "version": "0.1.2", "private": false, "main":"dist/vfan-ui.umd.min.js"
- 首先要把”private”改为false，私有的包npm是无法通过上传的
- name名在npm上必须唯一
- 同name下的version版本号不能重复
- 还需要加上“main”，并指定包的入口文件
3.然后执行npm run lib
执行成功后就会多出一个dist文件夹，该文件夹就是打包成功的组件库，将来使用组件库时只需要dist里面的文件即可，而dist中的vfan-ui.umd.min.js文件和vfan-ui.css将是我们使用的文件，只需要把dist文件夹发布到npm即可。
注：发布到npm前，记住要把项目往github上面推送一份，以便以后继续进行开发，关于往github上提交项目的步骤在此忽略
4.在npm上发布包时只需要上传编译的dist文件夹，不需要把自己的整个组件库源码上传上去，所以发布前还需要增加.npmignore文件，来忽略不需要上传的内容，只需要上传dist目录即可，将来用户安装时，包中只有dist目录文件即可，例如：
# 忽略目录 examples/ packages/ public/ tests/ # 忽略指定文件 vue.config.js babel.config.js cypress.json package.json *.map .browserslistrc .eslintrc.js
以上配置完成后就可以开始往npm上发布了，具体步骤如下：
- 如果有对组件库有新的修改，需要重新执行npm run lib对组件库进行打包，如果没有修改，则可忽略该步骤。
- 执行npm login ，然后输入用户名、密码和邮箱来登录npm
- 登录成功后，执行npm publish等待完成，即可发布成功
接下来我们就可以在其他项目中安装和使用了。
注：以上操作必须是基于npm的源，如果不是，需要使用nrm切换到npm，否则无法上传！
原创文章，作者：Ferrycoln，如若转载，请注明出处：https://ms200.cn/archives/1706
Ferrycoln 
