新建一个项目 使用vite+vue3+vue router +js+ant1.x

创建一个基于Vite、Vue 3、Vue Router 4和Ant Design 1.x的新项目，可以按照以下步骤操作：

1. **安装依赖**
使用`npm`或`yarn`初始化项目并安装所需的库：

   npm init vite-app my-project
   // 或者
   yarn create vite my-project

安装Vue Router 4、Ant Design和其他必要的库：

   npm install @vue/router antd axios typescript vite-plugin-vue3 vite-plugin-terser

2. **配置文件**
更新`vite.config.ts`以支持Vue 3、TypeScript以及路由配置：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import { createRouter, createWebHistory } from 'vue-router';
   import Antd from 'vite-plugin-antd';

   export default defineConfig({
     plugins: [
       vue(),
       Antd({
         locale: {
           messages: {
             zhCN: require('./locales/zh-CN.json'),
           },
         },
       }),
     ],
     server: {
       port: 3000,
     },
     build: {
       outDir: './dist',
     },
     router: () => createRouter({
       history: createWebHistory(process.env.BASE_URL),
       routes: [], // 这里添加你的路由配置
     }),
   });

3. **路由配置**
在项目的`src/router/index.ts`或相应的路由文件中，定义你的路由：

   import { createRouteMeta, RouteRecordRaw } from 'vue-router';
   const routes: Array<RouteRecordRaw> = [
     {
       path: '/',
       name: 'Home',
       component: () => import('./views/Home.vue'),
       meta: createRouteMeta({ title: '首页' }),
     },
     // 添加其他页面...
   ];

   export default routes;

4. **组件导入与使用**
在视图文件（如`src/views/Home.vue`）中引入Ant Design组件并使用它们：

   <template>
     <a-layout>
       <a-menu :default-active-key="['1']">
         <!-- 导航菜单 -->
       </a-menu>
       <router-view />
     </a-layout>
   </template>

   <script setup lang="ts">
   import { useRouter } from 'vue-router';
   const router = useRouter();

   onMounted(() => {
     router.push('/your-target-route');
   });
   </script>

5. **启动项目**
在项目根目录运行`npm run serve`或`yarn dev`来启动Vite服务器。