ui-ep
v1.0.61
Published
Vue3 基于 Element-plus 二次封装组件
Downloads
479
Maintainers
wqq100Readme
Ui-Ep
介绍
基于 vue3 + ts + Element-plus 二次封装组件
npm 方式安装使用
pnpm i ui-ep全局注册使用
前提条件：使用项目必须全局注册 Element-plus组件库
// 在 main.ts 中按下引入
import { createApp } from 'vue'
import App from './App.vue'
// element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// ui-ep
import UiEp from 'ui-ep'
import 'ui-ep/lib/ui-ep.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(UiEp)
app.mount('#app')按需引入
// 在 main.ts 中按下引入
import 'ui-ep/lib/ui-ep.css'
// 单个.vue文件引入
<script setup lang="ts">
import { UiButton } from 'ui-ep'
</script>国际化
<template>
<UiConfigProvider :locale="zhCn">
<app />
</UiConfigProvider>
</template>
<script setup lang="ts">
import { UiConfigProvider } from 'ui-ep'
import { zhCn } from 'ui-ep'
</script>暗黑模式
首先你可以创建一个开关来控制 暗黑模式 的 class 类名。
<html class="dark">
<head></head>
<body></body>
</html>全部组件如下
| 组件名称 | 说明 | | :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | | UiButton | 按钮组件 |
ui-ep Volar 组件类型提示
// 需要在使用的项目的 tsconfig.json 文件中添加以下
compilerOptions：{
"types": [
"ui-ep/lib/global.d.ts",
],
}
Vue3 + Vite 项目中安装引入报如下错误的解决方法
把项目的vite版本升级到4+
安装依赖
注意: 本地环境版本最好安装 Node.js 16.x+、pnpm 7.x+
npm install -g pnpm
# 安装依赖
pnpm install --registry=https://registry.npmjs.org/
>pnpm config get registry 查看当前指向源
# 如果安装依赖失败，可以尝试使用淘宝镜像 --registry=https://registry.npmmirror.com/
>pnpm config set registry https://registry.npmmirror.com/ 切换淘宝镜像源
>pnpm install
本地运行 vuepress 中组件文档
// docs项目(文档demo示例)基于vue3+vite项目
npm run docs:dev
Thanks to all the contributors
Git 提交规范
ci: ci 配置文件和脚本的变动;chore: 构建系统或辅助工具的变动;fix: 代码 BUG 修复;feat: 新功能;perf: 性能优化和提升;refactor: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;style: 代码格式调整，可能是空格、分号、缩进等等;docs: 文档变动;test: 补充缺失的测试用例或者修正现有的测试用例;revert: 回滚操作;