一套企业级 UI 设计语言的样式库。

✨ 优势

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• ⚙️ 全链路开发和设计工具体系。

🖥 兼容环境

| IE / Edge | Firefox | Chrome | Safari | | --- | --- | --- | --- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

使用

依赖

样式库是基于ant-design-vue@4+组件库进行设计的，使用本样式库请确保项目已经安装ant-design-vue组件库.

# npm
npm install ant-design-vue
# yarn
yarn add ant-design-vue

安装

# npm 
npm install u-design-token
npm install u-design-color

注意：如若安装失败，请加上 --force 进行安装

完整引入

// 引入样式包
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css';
import 'u-design-token'
const app = createApp(App);
app.use(Antd).mount('#app');

全局配置

配置app.vue文件

<script setup lang="ts">
import { changeThemeColors } from 'u-design-color';
const newToken = ref();
newToken.value = changeThemeColors();
</script>

<template>
  <a-config-provider :theme="{token: newToken}">
    <App />
  </a-config-provider>
</template>

其他特性

本样式库支持明暗模式、自定义换肤等多种功能，详情见官网。

🔗 官网链接

可访问链接