# 私有组件库的开发以及使用
# 组件库git地址:
bs-common-ui组件库git地址 (opens new window)
bs-common-ui-next组件库git地址 (opens new window)
| 项目名 | 说明 | 备注 |
|---|---|---|
| @common/bs-common-ui | 基于uView UI,适配不同终端的解决方案 | 版本v1.0.8 |
| @common/bs-common-ui-next | 基于uView UI,适配不同终端的解决方案(vue3.x) | 版本v1.0.4 |
# 背景
- 当前已有3个开源组件库已经用vue3.x版本重构：
element-plus ui (opens new window)
taro-ui-vue3 (opens new window)
# 一、如何开发
1.git clone https://jkcs.common.com.cn/common/bs-common-ui-xxx
2.cnpm i / yarn / npm i
# 二、如何发布
1.cd uview-ui
2.修改package.json 里面版本号
3.npm publish
4.查看npm 私有仓库:
# 三、如何使用
# 3.1 安装
# npm方式安装
npm i @common/bs-common-ui-xxx
1
2
2
# 3.2 快速上手
main.ts引入uView库
// main.ts
import uView from '@common/bs-common-ui-xxx';
Vue.use(uView);
1
2
3
2
3
App.vue引入基础样式(注意style标签需声明scss属性支持)
/* App.vue */
<style lang="scss">
@import "@common/bs-common-ui-xxx/index.scss";
</style>
1
2
3
4
2
3
4
uni.scss引入全局scss变量文件
/* uni.scss */
@import "@common/bs-common-ui-xxx/theme.scss";
1
2
2
pages.json配置easycom规则(按需引入)
/* pages.json*/
{
"easycom": {
// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
// npm安装方式
"^u-(.*)": "@common/bs-common-ui-xxx/components/u-$1/u-$1.vue"
// 下载安装方式
// "^u-(.*)": "@common/bs-common-ui-xxx/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
请通过快速上手 (opens new window)了解更详细的内容
# 3.3 使用方法
配置easycom规则后，自动按需引入，无需import组件，直接引用即可。
<template>
<u-button>按钮</u-button>
</template>
1
2
3
2
3
# 四、体验
Vue2.x
(微信小程序)
Vue3.x
(微信小程序)
Vue3.x
(支付宝小程序)
Vue3.x
(头条小程序)
Vue3.x
(百度小程序)
Vue3.x
(QQ小程序)
