在APP应用商店版本不断地迭代，技术实现方案也在不断地演进。视觉组件逐渐的稳定了，为了便于后续快速迭代和团队其他成员能够快速入手，另外其他H5项目也可能也需要用到类似应用商店的上组件，因此将应用商店用到组件全部抽离封装成独立组件库。

appstore01.png

组件库实现

创建项目

我们使用vue-cli3创建了一个项目。

  1. vue create store-component;

设计目录

  • docs目录： 用来存放文档
  • examples: 存放示例
  • package: 存放组件
  • test：业务组件
  • src：用来本地开发测试

lib01.png

构造统一引入组件库入口

  1. // 导入button组件
  2. import Button from './Button'
  4. // 组件列表
  5. const components = [
  6.   Button
  7. ]
  9. // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
  10. const install = function (Vue) {
  11.   // 判断是否安装
  12.   if (install.installed) return
  13.   // 遍历注册全局组件
  14.   components.map(component => Vue.component(component.name, component))
  15. }
  17. // 判断是否是直接引入文件
  18. if (typeof window !== 'undefined' && window.Vue) {
  19.   install(window.Vue)
  20. }
  21. // 单个导出
  22. export  {
  23.     Button
  24. }
  25. // 整体导出
  26. export default {
  27.   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  28.   install,
  29. }

编写单个组件

  1. import ArchButton from './src/index.vue';
  3. ArchButton.install = function(Vue) {
  4.     Vue.component(ArchButton.name, ArchButton);
  5. };
  7. export default ArchButton;

组件使用

  2. import Vue from 'vue';
  3. // 在自己项目中使用
  4. import {Button} from '../package/index.js'; 
  6. Vue.use(Button);

组件发布至NPM

作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json, 我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下,代码如下:

  2. module.exports = {
  3.     "scripts": {
  4.         "serve": "vue-cli-service serve",
  5.         "build": "vue-cli-service build",
  6.         "lib": "vue-cli-service build --target lib --name dbui --dest lib packages/index.js"
  7.       }
  8. }

2、文档说明

文档则使用Vuepress以md文档形式来生成，最后输出至docs目录下

3、demo示例

demo演示则单独以一个项目的形式开发生成。

4、参考资料

Vue官方文档

Vue-cli官方文档

Vue-cli官方文档

开发Vue插件四种方式

Vue.js 在复杂信息流场景下的实践

从0开始搭建Vue UI组件库

实现按需加载组件库

详解：Vue-cli3 库模式搭建组件库并发布到

如何开发一个Vue的UI组件库

如何开发一个基于Vue自己的UI库

从0到1教你基于Vue开发一个组件库