cthep-ui-vue2
v0.4.78
Published
爱习题组件库v2
Readme
cthep-ui-vue2 插件使用说明
Vant2 样式隔离方案
本插件内置了 Vant2 组件库,为了避免与接入方使用的 Vant3 样式冲突,采用了 CSS 命名空间隔离方案。
构建步骤
在发布npm包之前,需要先生成带命名空间的 Vant 样式文件:
cd package
# 安装依赖
npm install
# 生成带命名空间的 vant 样式
node build-vant-style.js执行成功后会在 package 目录下生成 vant-scoped.css 文件。
工作原理
- 样式隔离: 通过 PostCSS 为所有 Vant2 样式添加
.cthep-ui-v2前缀 - 组件包裹: 所有使用 Vant 组件的地方都需要用
<div class="cthep-ui-v2">包裹 - 样式加载: 插件会自动引入带命名空间的 Vant 样式
使用示例
<template>
<div class="cthep-ui-v2">
<!-- 你的组件内容 -->
<van-button type="primary">按钮</van-button>
<van-popup v-model="show">弹窗内容</van-popup>
</div>
</template>
<script>
export default {
name: 'YourComponent',
data() {
return {
show: false
}
}
}
</script>发布流程
- 修改组件代码
- 运行
node build-vant-style.js生成样式文件 - 确保
vant-scoped.css文件存在 - 发布到 npm:
npm publish
注意事项
⚠️ 重要:
- 所有使用 Vant 组件的 Vue 文件都必须在最外层添加
<div class="cthep-ui-v2">包裹 - 每次修改后发布前都要重新运行
build-vant-style.js - 不要手动修改
vant-scoped.css文件,该文件是自动生成的
接入方使用
接入方无需任何额外配置,只需正常安装和使用:
import Vue from 'vue'
import cthepUIVue2 from 'cthep-ui-vue2'
Vue.use(cthepUIVue2)即使接入方同时使用了 Vant3,也不会产生样式冲突。
