封装Vue组件库

[YIngChenIt]

封装组件库

背景

项目采用vue + ts的技术栈，而且很多公用组件，如图片上传、量表、业务组件等是公用的，自己也经历过将一个组件复制迁移到另外一个项目的需求，所以自己根据公司业务的情况封装了一个公司自己的前端移动端组件库

这里记录一下组件库项目的初始化和打包发布等关键步骤

搭建

初始化工程

首先我们需要用脚手架创建一个项目

vue create cnhis-ui

然后我们在src下新建一个文件夹packages,里面主要存放组件的汇总文件以及各个组件，可以根据自己的业务情况进行划分，这里贴一下汇总文件index.js的部分代码

import Input from './form/input.vue'

const install = (Vue) => {
    Vue.component(Input.name, Input)
}

// 如果通过script的方式引的组件
if (typeof window.Vue !== 'undefined') {
    install(Vue) // 全局通过script的方式下运行的话默认调用install方法
}

export default {
    install
}

那么我们没有把组件库发布到npm上的时候，怎么在项目里面测试我们的组件呢？

我们需要在组件库项目里面输入npm lint将组件库链接到全局

然后我们只需要在main.js引入我们的组件库并且Vue.use(cnhisUi)就可以本地开发预览和测试组件了

打包成组件库

到目前为止好像和我们平时的vue工程没什么区别，但是我们可以通过脚手架给我们提供的打包命令将我们的项目打包成组件库，我们需要修改一些package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name cnhis-ui ./src/packages/index.js"
  },
  "main": "./dist/cnhis-ui.umd.min.js",

当我们输入npm run lib的时候就可以打包成组件库发布到npm上面拉