在現代 Web 應用中，提供一個方便用戶返回頁面頂部的功能是非常重要的。Ant Design Vue 提供了 BackTop 組件，可以輕松實現這一功能。本文將詳細介紹如何在 Nuxt 3 項目中使用 <a-back-top/> 組件，并通過按需引入的方式加載組件及其樣式，以避免引入不必要的文件，減小打包體積，提高性能。

安裝 Ant Design Vue

首先，我們需要在項目中安裝 Ant Design Vue。你可以使用 npm 或 yarn 進行安裝。

使用 npm：

npm install ant-design-vue

使用 yarn：

yarn add ant-design-vue

安裝 vite-plugin-style-import 插件

為了按需引入 Ant Design Vue 的組件及其樣式，我們需要安裝 vite-plugin-style-import 插件。

使用 npm：

npm install vite-plugin-style-import -D

使用 yarn：

yarn add vite-plugin-style-import -D

配置 nuxt.config.ts

在 nuxt.config.ts 文件中配置 vite-plugin-style-import 和 unplugin-vue-components 插件，以便按需引入 Ant Design Vue 的組件及其樣式。

// nuxt.config.tsimport { defineNuxtConfig } from 'nuxt'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import { createStyleImportPlugin, AndDesignVueResolve } from 'vite-plugin-style-import'export default defineNuxtConfig({css: ['@/assets/less/style.less',// '@/assets/less/iconfont.less'],vite: {plugins: [Components({resolvers: [AntDesignVueResolver(), ]}),createStyleImportPlugin({resolves: [AndDesignVueResolve()],libs: [{libraryName: "ant-design-vue",esModule: true,resolveStyle: (name) => `ant-design-vue/es/${name}/style/index` // 注意這里的路徑適用于vite-plugin-style-import 2.0版本},]}),]},
})

按需引入 BackTop 組件

在需要使用 BackTop 組件的頁面布局文件中，按需引入 BackTop 組件。由于我們在 nuxt.config.ts 中已經配置了按需引入樣式，這里只需要引入組件即可。

假設你的頁面布局文件是 layouts/default.vue，你可以這樣配置：

<template><div><NavBar /><LeftMenu /><NuxtPage /><Footer /><a-back-top/></div>
</template><script lang="ts" setup>
import NavBar from '@/components/layout/NavBar.vue'
import LeftMenu from '@/components/layout/LeftMenu.vue'
import Footer from '@/components/layout/Footer.vue'
</script>

解釋

1. 引入組件：

   import BackTop from 'ant-design-vue/es/back-top'
   

   這行代碼按需引入了 BackTop 組件。

2. 配置 nuxt.config.ts：

   • Components 插件：使用 Components 插件和 AntDesignVueResolver 自動引入 Ant Design Vue 的組件，而不需要在每個頁面手動導入。
   • createStyleImportPlugin：使用 createStyleImportPlugin 和 AndDesignVueResolve 按需引入 Ant Design Vue 的樣式。

注意事項

• 避免全局引入：在 plugins/antd.client.ts 中全局引入 Ant Design Vue 的所有組件和樣式會導致打包文件體積增大，并可能引起樣式沖突。因此，建議按需引入所需的組件和樣式。刪除或注釋掉以下內容：

  // 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)
  // })
  

• 樣式路徑：確保你引入的樣式路徑是正確的。根據 vite-plugin-style-import 2.0 版本的路徑，使用 ant-design-vue/es/${name}/style/index。

使用模塊化引入

如果你更喜歡使用模塊化引入的方式，Nuxt 3 提供了 @nuxtjs/ant-design-vue 模塊，可以更方便地按需引入組件。以下是使用模塊化引入的方式：

1. 安裝模塊：

   npm install @nuxtjs/ant-design-vue ant-design-vue
   

   或

   yarn add @nuxtjs/ant-design-vue ant-design-vue
   

2. 配置 nuxt.config.ts：

   // nuxt.config.tsimport { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({css: ['@/assets/less/style.less',// '@/assets/less/iconfont.less'],modules: ['@nuxtjs/ant-design-vue'],antDesignVue: {components: ['BackTop'], // 按需引入 BackTop 組件styles: true // 自動引入按需組件的樣式}
   })
   

3. 使用 BackTop 組件的頁面或組件：

   <template><div><NavBar /><LeftMenu /><NuxtPage /><Footer /><BackTop /></div>
   </template><script lang="ts" setup>
   import NavBar from '@/components/layout/NavBar.vue'
   import LeftMenu from '@/components/layout/LeftMenu.vue'
   import Footer from '@/components/layout/Footer.vue'// 不需要手動導入 BackTop 組件，模塊會自動處理
   </script>
   

通過這種方式，你可以按需引入 BackTop 組件及其樣式，避免引入整個庫，從而減小打包體積，提高性能。

方法二：手動方式引入樣式

上述在 nuxt.config.ts 文件中配置 vite-plugin-style-import，使用了自動方式引入css樣式。如果不使用vite-plugin-style-import這個插件的話，也可以手動配置。
下面介紹下不使用vite-plugin-style-import插件的方法。

在nuxt.config.ts中引入需要的樣式，對應的樣式可以在node_modules\ant-design-vue\es\back-top路徑下找到css樣式，
再在nuxt.config.ts配置：

css: ['ant-design-vue/es/message/style/css','ant-design-vue/es/back-top/style/index','@/assets/less/style.less'// '@/assets/less/iconfont.less']

注意，不建議在plugin中全局的方式引入組件和樣式，那樣會增大體積或可能造成樣式沖突。

<a-back-top /> 和 BackTop 的區別

• <a-back-top />：自動導入組件，適用于使用 unplugin-vue-components 插件的自動解析功能。
• BackTop：手動導入組件，適用于需要按需引入特定組件及其樣式的情況。

為什么 BackTop 方式必須手動導入樣式？

當你使用 BackTop 方式時，手動導入組件和樣式的原因如下：

1. 按需引入：手動導入可以按需引入特定的組件及其樣式，而不是整個庫，從而減小打包體積，提高性能。
2. 避免全局沖突：手動導入可以避免全局引入時可能出現的樣式沖突問題。
3. 靈活性：手動導入提供了更大的靈活性，可以根據需要選擇性地引入組件和樣式。

示例：手動導入 BackTop 組件及其樣式

假設你的頁面布局文件是 layouts/default.vue，你可以這樣配置：

<template><div><NavBar /><LeftMenu /><NuxtPage /><Footer /><a-back-top /></div>
</template><script lang="ts" setup>
import NavBar from '@/components/layout/NavBar.vue'
import LeftMenu from '@/components/layout/LeftMenu.vue'
import Footer from '@/components/layout/Footer.vue'import BackTop from 'ant-design-vue/es/back-top'
import 'ant-design-vue/es/back-top/style/index.css' // 手動引入樣式
</script>

通過這種方式，你可以按需引入 BackTop 組件及其樣式，避免引入整個庫，從而減小打包體積，提高性能。

總結

• <a-back-top />：適用于使用 unplugin-vue-components 插件的自動解析功能，簡化組件導入過程。
• BackTop：適用于需要手動按需引入組件及其樣式，提供更大的靈活性和更細粒度的控制。

結論

在 Nuxt 3 項目中使用 Ant Design Vue 的 BackTop 組件，可以通過按需引入的方式加載組件及其樣式。這樣可以避免引入不必要的文件，減小打包體積，提高性能，并且減少樣式沖突的可能性。

希望本文對你有所幫助！如果你在使用過程中遇到任何問題，歡迎在評論區留言討論。

---

參考資料：

• Ant Design Vue 官方文檔
• Vite 官方文檔
• Nuxt 3 官方文檔
• https://www.cnblogs.com/xuruiming/p/17940021
• https://juejin.cn/post/7205842390841901093