Nuxt3 + Ant-Design-Vue 初体验

原创已于 2023-09-26 15:06:06 修改 · 5.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-07-05 02:20:29 首次发布

本文介绍如何在Nuxt3项目中集成Ant Design Vue组件库，并解决常见问题。包括安装配置步骤、常见错误提示及解决方案。

nuxt3 和 antd 在本地安装完成后，根据nuxt官网介绍完善相关目录。

在 plugins 文件夹下新建文件 antd.client.ts

// plugins/antd.client.ts

import Antd from "ant-design-vue";
import 'ant-design-vue/dist/antd.css';

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

事情还没有结束，此时 npm run dev 你会发现页面报错，不要急，接下来在 pages 文件夹下新建一个文件夹，比如新建一个 home/index.vue 文件
```
// pages/home/index.vue

<template>
  <div>home page</div>
</template>
```

此时再次刷新页面，你就会发现页面可以正常显示组件了！

除此之外还有一些奇奇怪怪的小问题，比如新建一个文件后，直接通过url访问页面会报404，但通过<NuxtLink /> 标签跳转的话，唉！你会发现他又可以访问了…或者在更新一个页面的代码后，浏览器 F5 刷新会报错，再次 F5 一下，唉！他又行了…

2023-09-26 更新

当前 Nuxt3 已更新至3.7.4稳定版，项目上可以正常使用。

Ant-Design-Vue 现也已支持在 Nuxt3 导入，导入方式如下：

将 @ant-design-vue/nuxt 依赖项添加到项目中

# Using pnpm
pnpm add -D @ant-design-vue/nuxt

# Using yarn
yarn add --dev @ant-design-vue/nuxt

# Using npm
npm install --save-dev @ant-design-vue/nuxt

将 @ant-design-vue/nuxt 添加到 nuxt.config.ts 的 modules 部分

export default defineNuxtConfig({
  modules: [
    '@ant-design-vue/nuxt'
  ],
  antd:{
    // Options
  }
})

现在你可以在Nuxt应用中使用 ant-design-vue 了

<script lang="ts" setup>
const handleMessage = () => {
  message.info("This is a normal message");
}
</script>
<template>
  <a-button @click="handleMessage">
    button
  </a-button>
</template>