%20(2).svg)
项目简介
这是一个专为可见音乐项目设计的基于Vue框架的UI组件库。涵盖从基础到高级的一系列Vue组件，可帮助开发者快速构建具有优质UI的可见音乐应用。项目安装配置简便，扩展性强，适用于各种规模的可见音乐项目。
项目的主要特性和功能
- 组件丰富：提供大量常用UI组件，如按钮、表单、弹窗、导航菜单等，满足多数业务需求。
- 主题定制：支持开发者根据项目需求自定义主题样式。
- 按需加载：可按需加载组件，提升项目加载速度与性能。
- Volar支持：集成VSCode的Volar插件，实现更好的类型检查和自动完成功能。
- 高级配置：提供高级配置选项，方便开发者调整组件行为和样式。
安装使用步骤
安装项目依赖
在项目根目录下运行以下命令安装依赖：
bash
pnpm add @seemusic/ui-components
pnpm install @seemusic/element-plus-theme-sop @seemusic/styles
配置项目
- 在
src/assets新建css/theme.scss，内容如下：scss @import "@seemusic/styles/src/colors/seemusic.scss"; @import "@seemusic/element-plus-theme-sop"; - 在
vite.config.ts中增加相应配置： ```ts import { defineConfig } from 'vite';
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/css/theme.scss" as *;'
}
}
},
});
3. 若使用自动导入组件，需配置 `vite.config.ts`：ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { UIComponentsResolver } from '@seemusic/ui-components/resolver';
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
UIComponentsResolver({ prefix: 'sop' })
],
dts: 'src/dts/components.d.ts',
extensions: ['vue'],
include: [
/.vue$/,
/.vue\?vue/
]
})
],
});
4. 若使用 `VSCode`，在 `tsconfig.json` 中指定全局组件类型：json
{
"compilerOptions": {
"types": ["@seemusic/ui-components/lib/volar"]
}
}
5. 若使用高级组件，在 `main.ts` 中引入 `element-plus` 的样式文件：ts
import './assets/css/basic.scss';
import 'element-plus/dist/index.css';
``
并修改vite.config.ts中的element-plus` 自动导入配置。
使用组件
- 全量导入组件： ```ts // main.ts import '@seemusic/ui-components/styles'; import { createApp } from 'vue'; import { createSeeMusic } from '@seemusic/ui-components'; import * as components from '@seemusic/ui-components/components';
const app = createApp(App);
const SeeMusicUI = createSeeMusic({ components });
app.use(SeeMusicUI);
- **按需导入组件**：ts
// xxx.vue
import { SopBasicInfo } from '@seemusic/ui-components/components';
``
- **自动导入组件（推荐）**：使用unplugin-vue-components` 插件自动按需导入组件。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】