使用Vite和修改默认主题参数的Arco设计

1. 在项目文件夹中安装Arco Design样式库。

npm install arco-design --save

2. 在main.js文件中导入Arco Design样式库和样式文件。

import ArcoDesignVue from 'arco-design-vue'
import 'arco-design/css/normal.css'
import 'arco-design/css/dark.css'

3. 将Arco Design样式库添加到Vue项目中。

Vue.use(ArcoDesignVue)

4. （可选）修改默认的主题参数。例如，将默认主题改为黑暗模式。

import { theme } from 'arco-design'
theme.setTheme('dark')

5. 在vite.config.js文件中添加别名以便于在代码中引入Arco Design组件。

export default {
  resolve: {
    alias: {
      '@arco-design/web-vue': '@arco-design/web-vue/es'
    }
  }
}

6. 在需要使用Arco Design组件的文件中导入所需的组件，并按照Arco Design文档中的用法进行组件的使用。

import { Button } from '@arco-design/web-vue'

7. 运行Vite项目。

npm run dev