@arco-plugins/vite-vue

Feature

1. Style lazy load
2. Theme import
3. Icon replacement

Style lazy load doesn't work during development for better experience.

Install

npm i @arco-plugins/vite-vue -D

Usage

// vite.config.js

import { vitePluginForArco } from '@arco-plugins/vite-vue'

export default {
  ...
  plugins: [
    vitePluginForArco(Options),
  ],
}

// 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');

// *.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>

Options

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' | Component prefix | | iconPrefix | {String} | icon | Icon component prefix |

**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