内容
组件的基本封装思路
封装成 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 包
- 在
package.json
文件中添加如下
"name": "wenqi-ui",
"private": false,
"main": "dist/cwen-ui.umd.min.js",
注意:此处 name
值在 npm 上唯一;private
值必须是 false;main
值与打包路径文件对应
- 添加
.npmignore
文件(添加不上传文件)
# 忽略目录
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
-
npm 上传源必须是 npm ,不能是镜像(taobao等代理)
-
npm 登录 (需注册 npm 账号)
-
命令行
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小时内可以撤销)