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

内容

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

写在前面

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

封装组件

对于组件的封装,可参考 组件封装基本思路,此处不再赘述。

封装成 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 方法介绍

在这里插入图片描述

4. 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小时内可以撤销)

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页