Nuxt3按需引入Arco Design

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

引入步骤

1. 安装依赖

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

2. 创建插件

在根目录plugins下新建一个arco.js

复制以下内容:

// arco.js
import { defineNuxtPlugin } from '#app'
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'

// 引入arco图标库
import ArcoVueIcon from '@arco-design/web-vue/es/icon'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ArcoVue)
  nuxtApp.vueApp.use(ArcoVueIcon)
})

3. 配置nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@arco-design/web-vue/dist/arco.css'
  ],
  // 如果需要按需导入
  build: {
    transpile: ['@arco-design/web-vue']
  }
})

现在如果你不需要按需导入, 后面的步骤可以不用做了, 已经完整引用Arco Design了

4. 按需导入, 减小打包体积

安装依赖

npm install -D unplugin-vue-components

给nuxt.config.ts添加以下配置

// nuxt.config.ts
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'

export default defineNuxtConfig({
  // ...其他配置
  
  vite: {
    plugins: [
      Components({
        resolvers: [
          ArcoResolver({
            sideEffect: true
          })
        ]
      })
    ]
  }
})

5. 这样配置自动引入就配置完了, 但是出现一个新的问题, Arco Design引用的dayjs没有默认导出, 如果你的没有出现, 不用在意这个问题

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/dayjs/plugin/advancedFormat.js?v=e471329f' does not provide an export named 'default' (at date.js:24:8)

解决方法:

在nuxt.config.ts配置一个别名

// nuxt.config.ts
export default defineNuxtConfig({
  // ...其他配置
  
  alias: {
    dayjs: 'dayjs'
  }
})