vue-cli3 搭建UI组件库并发布到npm
vue-cli3 搭建UI组件库并发布到npm
一、创建项目
vue-cli3创建默认项目，选择default模式
vue creat .
目录结构
demo
├─ node_modules
├─ src
├─ public
├─ .gitignore
├─ babel.config.js
├─ package.json
├─ package-lock.json
└─ README.md
更改目录
.
...
|-- examples // 原 src 目录，改成 examples 用作示例展示
|-- packages // 新增 packages 用于存放组件
...
.
修改配置
-
cli3 提供一个可选的 vue.config.js配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。
-
支持对 packages 目录的处理，修改配置中的 chainWebpack 选项。packages 是我们新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持。chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
module.exports = {
// 修改 src 为 examples
pages: {
index: {
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html"
}
},
// 组件样式内联
css: {
extract: false
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages/')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
};
二、编写组件
packages目录
|-- packages // 新增 packages 用于存放组件
|-- alert // 示例组件
|-- src
|-- main.vue
|-- index.js // 导出单个组件
|-- index.js // 整合所有组件并导出
单个组件index.js
// 导入组件，组件必须声明 name
import Alert from './src/main'
// 为组件提供 install 安装方法，供按需引入
Alert.install = function (Vue) {
Vue.component(Alert.name, Alert)
}
// 默认导出组件
export default Alert
注意：组件必须声明 name，这个 name 就是组件的标签
整合所有组件
// 导入单个组件
import Alert from "./alert/index"
import TabList from "./tab-list/index"
// 以数组的结构保存组件，便于遍历
const components = [
Alert,
TabList
]
// 定义 install 方法
const install = function (Vue) {
if (install.installed) return
install.installed = true
// 遍历并注册全局组件
components.map(component => {
Vue.component(component.name, component)
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具备一个 install 方法
install,
// 组件列表
...components
}
example示例
引入
import IslandUI from '../packages/index'
Vue.use(IslandUI)
npm run serve启动项目，测试一下组件是否有 bug
三、打包
vue-cli3 提供了一个库文件打包命令
主要需要四个参数：
-
target: 默认为构建应用，改为
lib即可启用构建库模式 -
name: 输出文件名
-
dest: 输出目录，默认为
dist，这里我们改为lib -
entry: 入口文件路径，默认为
src/App.vue，这里改为packages/index.js
{
"scripts": {
"lib": "vue-cli-service build --target lib --name island-ui --dest lib packages/index.js",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
}
执行 npm run lib 命令，编译组件
构建一个库会输出：
-
lib/island-ui.common.js：一个给打包器用的 CommonJS 包 (不幸的是，webpack 目前还并没有支持 ES modules 输出格式的包) -
lib/island-ui.umd.js：一个直接给浏览器或 AMD loader 使用的 UMD 包 -
lib/island-ui.umd.min.js：压缩后的 UMD 构建版本 -
lib/island-ui.css：提取出来的 CSS 文件 (可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联)
注意：如果不设css内联，样式会被单独打包，在引用时需引入打包后的样式文件。
四、发布
发布前的准备
修改package.json文件
-name: 包名，该名不能和已有的名称冲突；
-version: 版本号，不能和历史版本号相同；
-description: 简介；
-main: 入口文件，应指向编译后的包文件；
-keyword：关键字，以空格分割；
-author：作者；
-private：是否私有，需要修改为 false 才能发布到 npm；
-license：开源协议。
创建.npmignore文件
和.gitignore语法一样，设置发布到npm上被忽略的文件
# 忽略目录
packages/
examples/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
开始发布
如果自己修改过 npm 的镜像地址，比如使用了淘宝镜像，需要改回来
npm config set registry http://registry.npmjs.org- 或者使用nrm便捷的管理registry地址
nrm ls // 查看镜像列表
nrm use npm // 切换镜像
注册并登录npm，在终端执行登录命令，输入用户名、密码、邮箱即可登录。
npm adduser
或者你也可以
npm login
选择一个陪你到老❤️
输入用户名、密码、邮箱登陆，登陆成功后可以查看当前登陆的username
npm whoami
执行发布命令，发布组件到 npm
npm publish
✌️成功发布后会收到npm发来的邮件，在npm官网上可搜索到自己发布的包。
附：
- npm publish可能遇到的问题
- npm update