内容

组件的基本封装思路
封装成 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 值与打包路径文件对应

2. 添加 .npmignore 文件（添加不上传文件）

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

3. npm 上传源必须是 npm ，不能是镜像（taobao等代理）

4. npm 登录 （需注册 npm 账号）

5. 命令行 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小时内可以撤销）