# SynergiUI使用方法

## 1. 安装

1. 安装SynergiUI

```bash
npm i synergi-ui
```

## 2. 引入

1. 全局引入

```js
import { createApp } from 'vue';
// element-plus 也应该全局安装, 别忘了全局引入样式
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/src/index.scss';
// 全局安装 synergi-ui , 别忘了全局引入样式
import SynergiUi from 'synergi-ui';
//import SynergiUi from 'synergi-ui/es/core';
import 'synergi-ui/es/style/index.scss';

const app = createApp(App);

app.use(ElementPlus);
app.use(SynergiUi);
app.mount('#app');
```

2. 按需引入

```js
// 在 vite.config.js 中配置, element-plus 也应该按需引入
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { EleAdminResolver } from 'synergi-ui/es/utils/resolvers';

export default defineConfig(() => {
  return {
    plugins: [
      vue(),
      Components({
        dts: false,
        resolvers: [
          // Element 组件按需引入
          ElementPlusResolver({
            importStyle: 'sass'
          }),
          // SynergiUi 组件按需引入
          EleAdminResolver({
            importStyle: 'sass'
          })
        ]
      })
    ]
  };
});
```