Style lazy load
Theme import
Icon replacement
npm i @arco-plugins/vite-vue -D
// vite.config.js
import vitePluginForArco from '@arco-plugins/vite-vue'
export default {
...
plugins: [
vitePluginForArco(Options),
],
}
// vue
<script setup>
import { Button } from '@arco-design/web-vue';
</script>
<template>
<div>
<Button type="secondary">Cancel</Button>
<a-button type="primary">Submit</a-button>
<component is="a-button" loading>Loading</component>
</div>
</template>
The plugin supports the following parameters:
Params | Type | Default Value | Description |
---|---|---|---|
theme |
{String} |
'' |
Theme package name |
iconBox |
{String} |
'' |
Icon library package name |
modifyVars |
{Object} |
{} |
Less variables |
style |
{'css'|Boolean} |
true |
Style import method |
varsInjectScope |
{(string|RegExp)[]} |
[] |
Scope of injection of less variables (modifyVars and the theme package's variables) |
componentPrefix |
{String} |
a |
componentPrefix |
**Style import methods **
style: true
will import less file
import '@arco-design/web-vue/Affix/style';
style: 'css'
will import css file
import '@arco-design/web-vue/Affix/style/css';
style: false
will not import any style file