Nuxt3+Vue3(Composition API)+TS+Vite+Ant Design Vue 搭建

以下是使用Nuxt 3、Vue 3、TypeScript、Vite和Ant Design Vue搭建项目的基本步骤：

1. 确保安装了Node.js（建议版本8+）。

2. 安装create-nuxt-app（如果尚未安装）:

   
   
   
   npx create-nuxt-app <project-name>

3. 进入项目目录并安装Vite作为构建工具：

   
   
   
   cd <project-name>
   npm install vite

4. 安装Ant Design Vue：

   
   
   
   npm install ant-design-vue@next

5. 在nuxt.config.js中配置Vite作为构建工具，并配置Ant Design Vue 插件：

   
   
   
   export default defineNuxtConfig({
     build: {
       extend(config, { isDev, isClient }) {
         if (isDev && isClient) {
           config.resolve.alias.push({
             name: '@ant-design/icons/lib/dist$',
             alias: require.resolve('@ant-design/icons/es/icons'),
           });
         }
       },
       vite: {
         plugins: [
           // 使用 Vite 插件来处理 Ant Design Vue 的图标
           ...AntDesignVueIconsResolver({
             enabledCollections: ['outline'],
           }),
         ],
       },
     },
     modules: ['@nuxtjs/ant-design-vue/module'],
   });

6. 在<project-name>/components/global-components.d.ts中声明全局组件：

   
   
   
   /// <reference types="vite/client" />
   /// <reference types="ant-design-vue/es/index" />
   declare module 'vue' {
     export interface GlobalComponents {
       AButton: typeof import('ant-design-vue/es')['Button'];
       // 添加其他组件
     }
   }

7. 在组件中使用Ant Design Vue组件：

   
   
   
   <template>
     <a-button type="primary">按钮</a-button>
   </template>
    
   <script setup lang="ts">
   // 无需导入组件，可直接使用
   </script>

8. 启动项目：

   
   
   
   npm run dev

以上步骤提供了一个基本的框架来搭建一个使用Nuxt 3、Vue 3、TypeScript、Vite和Ant Design Vue的项目。根据具体需求，您可能需要进一步配置路由、状态管理、插件等。