vue lib 模式构建自己的组件库

为什么构建组件库

不用再重复造轮子，所有的项目都能用；希望有一套一类应用的标准，并且对组件的样式有较高的要求，那么你就需要开发一个组件库了

开发组件库步骤

1.创建项目：正常的创建vue项目

2.修改配置：

在scripts字段中新增一个命令脚本，如：

"build-lib": "vue-cli-service build  --target lib --entry src/components/index.js --name uiLib"；

--target属性表示构建目标，默认为应用模式，这里需要设置为lib，表示启用库模式。
--name属性表示构建的名称，可以与package.json文件中的name字段的值不相同；
--最后表示入口文件，默认为src/App.vue，在这里我们修改为了./src/index.js。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-lib": "vue-cli-service build  --target lib --entry src/components/index.js --name uiLib"
  },

3.编写组件，导出组件

正常的编写一个组件，例如在componets文件下创建一个myButton文件，建一个MyButton组件，（可以多创建几个UI组件，例如再创建一个MyInput 组件）。

image.png

在src下创建index.js,编写导出组件的代码

import MyInput from './my-input'
import MyButton from './my-button';

// 存储组件列表
const components = [
    MyInput,
    MyButton
]
//install是让业务代码在main.js 引入之后 use(myUi)  注册到全局用的
const install = (app, opts = {}) => {
    components.forEach(item => {
        app.component(item.name, item)
    })
}

const exportObject = {
    // 全局导出
    version: '1.0.0',
    install
};
export default exportObject;

4.打包组件库

根目录下打开cmd窗口，输入npm run build-lib命令
在根目录下会生成dist文件夹，其里面的文件如下图所示：

image

到此，组件已经完成构建了。将打包好的****.umd.min.js直接放到业务项目中，直接引入也是可以用的。

5.将组件发布到npm的步骤

首先是注册npm：

1.官网注册
https://www.npmjs.com/signup
2.命令行注册
npm adduser //按照提示输入用户名,邮箱等即可
3.注册后登陆
npm login //按照提示输入用户名,密码,邮箱等即可

在业务项目中安装

npm install --save @username/component-name //@npm官网注册username/组件项目名 == @username/component-name

然后引入
import '@username/component-name'

使用即可

6.优化

1.排外打包
如果组件库项目和业务项目引用了相同的依赖，比如element，可以设置排外打包，在业务项目中引用即可，减少组件库包体积。

image.png

2.按需引入
在组件库项目改动如下：
例如，在myButton下建一个js文件，编写单独导出组件的代码，如图：

image.png

在src目录下的index.js文件，将componets/MyButton.vue组件导出：

import MyInput from './my-input'
import MyButton from './my-button';

// 存储组件列表
const components = [
    MyInput,
    MyButton
]

const install = (app, opts = {}) => {
    components.forEach(item => {
        app.component(item.name, item)
    })
}

const exportObject = {
    // 全局导出
    version: '1.0.0',
    install,
    MyInput, // 单独导出button组件用于按需加载
    MyButton
};

export default exportObject;