【vue进阶】打造自己的 UI 组件库

ゝ一世哀愁。 2022-12-10 10:03 266阅读 0赞

## 内容 ##

> 组件的基本封装思路  
> 封装成 UI 组件库  
> 把封装的组件发布到 npm  
> npm 包的删除

## 写在前面 ##

写在前面：对于成熟的 UI 组件库，已经可以满足绝大部分项目的需求。但对于一些自己项目常用，却又无出处的组件来说，我们经常会对其进行自行封装。封装后用起来的却方便，但可移植性却不高。此时我们大可以将其发布到 npm 上，这样不仅自己随时随地可以使用，也可供全球开发者使用，何乐而不为，嗯哼！

## 封装组件 ##

对于组件的封装，可参考 [组件封装基本思路][Link 1]，此处不再赘述。

## 封装成 UI 组件库 ##

##### 1. 在 vue 项目根目录下创建文件夹 #####

①：在 vue 项目根目录下创建 `packages: 用于存放所有的组件`、`examples: 用于进行测试,把src改成examples`；  
②：把`components` 中所有的组件放入到 `packages`中；把`fonts`(组件中用到的公共样式) 放到 `packages`中

##### 2. 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
          })
      }
    }

##### 3. index.js 配置（在 packages 下创建 index.js） #####

主要用于导出所有组件及样式（注意 install 方法）

// 统一导出
    // 导入颜色选择器组件
    import Button from './button'
    import Dialog from './dialog'
    import Input from './input'
    import Checkbox from './checkbox'
    import Radio from './radio'
    import RadioGroup from './radioGroup'
    import Switch from './switch'
    import CheckboxGroup from './checkbox-group'
    import Form from './form'
    import FormItem from './form-item'
    import './fonts/font.scss'
    
    // 存储组件列表
    const components = [
        Button,
        Dialog,
        Input,
        Checkbox,
        Radio,
        RadioGroup,
        Switch,
        CheckboxGroup,
        Form,
        FormItem
    ]
    
    // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
    const install = function(Vue) { 
        // 遍历注册全局组件
        components.forEach(component => { 
            Vue.component(component.name, component)
        })
    }
    
    // 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
    if (typeof window !== 'undefined' && window.Vue) { 
        install(window.Vue)
    }
    
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    export default { 
        install
    }

**install 方法介绍**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]

##### 4. vue cli 打包成库 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]  
**具体参考**：[Vue Cli 打包成库][Vue Cli]

在 package.json 文件中添加打包成库的命令，然后执行此命令

项目目录下生成 `dist` 文件夹，此文件夹用于上传。

##### 5. 发布 npm 包 #####

1.  在 `package.json` 文件中添加如下

"name": "wenqi-ui",
        "private": false,
        "main": "dist/cwen-ui.umd.min.js",

注意：此处 `name` 值在 npm 上唯一；`private` 值必须是 false；`main` 值与打包路径文件对应

1.  添加 `.npmignore` 文件（添加不上传文件）

# 忽略目录
    examples/
    packages/
    public/
     
    # 忽略指定文件
    vue.config.js
    babel.config.js
    *.map

1.  npm 上传源必须是 npm ，不能是镜像（taobao等代理）
2.  npm 登录 （需注册 npm 账号）
3.  命令行 `npm login`、登陆成功后 `npm publish` （注意：密码为暗文，不显示只管输入）

综上 UI 组件库发布成功；值得注意的是，如果要给上传后的库追加组件，接着在原来的 packages 中注册，操作一致，但上传时，记得修改版本号 `version`

##### 6. 删除 npm 包 #####

> `npm unpublish --force` //强制删除  
> `npm unpublish packageName@0.1.0` //指定版本号  
> `npm deprecate` //某些情况删除  
> `npm unpublish packageName --force` //npm撤销（24小时内可以撤销）

[Link 1]: https://blog.csdn.net/cwq521o/article/details/108400367
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/151b8431465f4439b6ec2ea29dff6b7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/6ae165fedd57472a873ca3b1c426dfa3.png
[Vue Cli]: https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93