# arco-plugins-vite-vue
**Repository Path**: baymaxsjj/arco-plugins-vite-vue
## Basic Information
- **Project Name**: arco-plugins-vite-vue
- **Description**: arco-plugins-vite-vue
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-20
- **Last Updated**: 2023-12-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# @arco-plugins/vite-vue
## 特性
1. `样式按需加载`
2. `主题引入`
3. `图标替换`
> 为了开发体验,开发环境下样式为全量引入
## 安装
```bash
npm i @arco-plugins/vite-vue -D
```
## 用法
```js
// vite.config.js
import { vitePluginForArco } from '@arco-plugins/vite-vue'
export default {
...
plugins: [
vitePluginForArco(Options),
],
}
```
```diff
// main.js
import { createApp } from 'vue'
- import ArcoVue from '@arco-design/web-vue';
- import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import App from './App.vue';
- import '@arco-design/web-vue/dist/arco.css';
const app = createApp(App);
- app.use(ArcoVue);
- app.use(ArcoVueIcon);
app.mount('#app');
```
```tsx
// *.vue
```
## 参数
插件支持以下参数:
| 参数名 | 类型 | 默认值 | 描述 |
| :-------------------: | :----------------: | :----: | :----------------------------------------------- |
| **`theme`** | `{String}` | `-` | 主题包名 |
| **`iconBox`** | `{String}` | `-` | 图标库包名 |
| **`modifyVars`** | `{Object}` | `-` | Less 变量 |
| **`style`** | `{'css'\|Boolean}` | `true` | 样式引入方式 |
| **`varsInjectScope`** | `string[]` | `-` | less 变量(modifyVars 和主题包的变量)注入的范围 |
| **`componentPrefix`** | `{String}` | `'a'` | 组件前缀 |
| **`iconPrefix`** | `{String}` | `icon` | 图标组件前缀 |
**样式引入方式 **
`style: true` 将引入 less 文件
```js
import '@arco-design/web-vue/Affix/style';
```
`style: 'css'` 将引入 css 文件
```js
import '@arco-design/web-vue/Affix/style/css';
```
`style: false` 不引入样式