Nuxt3按需引入Arco Design

前段时间打算给一个项目用NaiveUI来写的, 但是今天写着写着发现他们的响应式栅格在SSR框架会出现抖动和水合的问题, 应该有解决办法, 但是我太菜了, 只好换一下框架😂

引入步骤

1. 安装依赖

# npm
npm install --save-dev @arco-design/web-vue
# yarn
yarn add --dev @arco-design/web-vue

2. 安装Arco的插件

Arco的按需引入有两种：

推荐第二种，第一种据官方描述，如果手动导入的组件，需要自己再手动导入对应样式

执行以下安装按需引入插件

# npm
npm install @arco-plugins/vite-vue
# yarn
yarn add @arco-plugins/vite-vue

3. 配置nuxt.config.ts

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

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    plugins: [
      vitePluginForArco({
        style: 'css'
      })
    ]
  },
})

4. 这样按需引入就完成了😊