Charisma-UI

主题

Charisma UI 使用指南 ​

Charisma UI 是一个基于 Vue 3 的轻量级组件库，提供一套完整的现代化 UI 组件，帮助你快速搭建前端界面。

特点：

  • ✅ 全量 TypeScript 支持，类型安全
  • ✅ 响应式设计，适配移动端和桌面端
  • ✅ 组件可按需引入，减小打包体积
  • ✅ 支持主题自定义和样式覆盖
  • ✅ 内置常用交互效果，如滚动、拖拽、弹窗、表单等

安装 ​

使用 npm 或 yarn 安装 Charisma UI：

bash
# npm
npm install charisma-ui --save

# pnpm
pnpm add charisma-ui

# yarn
yarn add charisma-ui

全量引入 ​

ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import CharismaUI from "charisma-ui";
import "charisma-ui/dist/style.css";

const app = createApp(App);
app.use(CharismaUI);
app.mount("#app");

按需引入 ​

自动按需导入 ​

首先你需要安装 unplugin-vue-components 、 unplugin-auto-import 和 charisma-ui-resolver 这三款插件

bash
# npm
npm install unplugin-vue-components unplugin-auto-import charisma-ui-resolver --save-dev

# pnpm
pnpm add unplugin-vue-components unplugin-auto-import charisma-ui-resolver --save-dev

# yarn
yarn add unplugin-vue-components unplugin-auto-import charisma-ui-resolver --dev

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite ​

ts
// vite.config.ts
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { CharismaUIResolver } from "charisma-ui-resolver";

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({ resolvers: [CharismaUIResolver] }),
    Components({ resolvers: [CharismaUIResolver] }),
  ],
});

Webpack ​

js
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { CharismaUIResolver } = require("charisma-ui-resolver");

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [CharismaUIResolver()],
    }),
    Components({
      resolvers: [CharismaUIResolver()],
    }),
  ],
};

手动按需导入 ​

ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { ChButton } from "charisma-ui";
import "charisma-ui/dist/style.css";

const app = createApp(App);
app.component("Button", Button);

app.mount("#app");

快速上手 ​

vue
<template>
  <ch-button>Default</ch-button>
  <ch-button type="primary">Primary</ch-button>
  <ch-button type="success">Success</ch-button>
  <ch-button type="danger">Danger</ch-button>
</template>

自定义主题 ​

如果您的项目也使用了 SCSS，可以直接修改 Charisma UI 的样式变量。

scss
$colors: (
  primary: #409eff,
  success: #67c23a,
  warning: #e6a23c,
  danger: #f56c6c,
  info: #909399,
);

暗黑模式 ​

如果您需要暗色模式，只需在 html 上添加一个名为 dark 的类

html
<html class="dark">
  <head></head>
  <body></body>
</html>

文档与示例 ​

Charisma UI 提供了详细的文档和示例，帮助你快速上手和使用。你可以访问 Charisma UI 文档 获取更多信息和帮助。