1.0.2 • Published 3 years ago
lerna-ant-ui v1.0.2
LernaUI
Lerna-ant-ui V1.0.2
前言
Lerna 管理工具及组件库发布基础实践示例
组件库使用
安装组件库
npm install lerna-ant-ui
项目内使用(示例)
// mian.js
// 安装组件库后在main.js 中引入注册,即可全局使用组件库组件
import LernaUI from 'lerna-ant-ui'
Vue.use(LernaUI)
组件库预览
待完善
组件开发流程
组件开发环境及工具介绍
组件文件目录
组件开发
- 在 packages\src 下新建一个组件文件夹,以 Button 组件为例
- 注意必须填写组件 name,且唯一
- 组件 install 注册
// packages\lerna-ant-ui\src\Button\index.js
import LernaButton from './components/Button.vue'
LernaButton.install = Vue => {
Vue.component(lernaButton.name, LernaButton)
}
export default LernaButton
- 组件库入口文件 index 注册
// packages\lerna-ant-ui\index.js
import LernaButton from './src/Button/components/Button.vue'
const components = [LernaButton]
// script标签方式映入
const install = function(Vue, opts = {}) {
// 判断是否安装过
if (install.installed) return
// 注册所有组件
components.forEach(component => {
Vue.component(component.name, component)
})
}
// 支持使用标签方式引入
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 总体
install,
LernaButton
}
本地环境测试
- 组件库环境
// main.js 入口引入
import LernaUI from '../packages/lerna-ant-ui/index'
Vue.use(LernaUI)
项目实际环境
- 组件库需发布至 npm 管理
- 安装 lerna-ant-ui
npm install lerna-ant-ui
- 项目中使用
// main.js 入口引入
import LernaUI from 'lerma-ant-ui'
Vue.use(LernaUI)
组件库发布
- 第一次 publish 前我们需要执行,登录 npm,或官网登录
npm login --registry=https://registry.npmjs.org
使用 git 命令,并 git commit 提交
- git status
- git add .
- git commit -m "发布 lerna-ant-ui 组件库"
发布 publish
- git commit 之后执行 lerna publish
lerna publish
版本更新日志
待完善