Vite + Vue3 + TypeScript项目创建与配置

Vite是一个由尤雨溪（Vue.js的创始人）创建的现代化前端构建工具，它为Vue3项目提供了最佳的开发体验。Vue3是Vue的最新版本，提供了更多的功能和性能提升。TypeScript是JavaScript的一个超集，它添加了静态类型系统，使得代码更加健壮和易于维护。
一、创建项目
首先，我们需要安装Node.js和npm（Node.js的包管理器）。然后，打开终端并切换到我们想要创建项目的目录。接下来，运行以下命令来初始化一个新的Vue3项目：

npm init vite@latest my-vue3-ts-project -- --template vue
cd my-vue3-ts-project
npm run dev

以上命令会创建一个名为my-vue3-ts-project的新项目，并使用Vue模板。然后进入项目目录，并启动开发服务器。
二、路由配置修改
在Vue3中，我们使用Vue Router进行路由配置。首先，我们需要安装Vue Router：

npm install vue-router@next

然后，在src目录下创建一个名为router的文件夹，并在其中创建一个名为index.ts的文件。在该文件中，我们将编写路由配置：

import { createRouter, createWebHistory } from 'vue-router'
import { createApp } from 'vue'
import App from './App.vue'
import AboutView from '../views/AboutView.vue'
const routes = [{
path: '/',
name: 'About',
component: AboutView
}]
const router = createRouter({ history: createWebHistory(), routes})
const app = createApp(App)
app.use(router)
app.mount('#app')

以上代码定义了一个简单的路由，将根路径/映射到AboutView组件。然后我们创建一个新的Vue应用，将路由器作为插件添加到应用中，并将应用挂载到#app元素上。
三、生产与开发环境配置
在Vite项目中，生产与开发环境配置是通过Vite的配置文件来完成的。在vite.config.ts文件中，我们可以进行以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import TerserPlugin from 'terser-webpack-plugin'
import { HappyPack } from 'vite-plugin-happy'
import vueRouter from 'vite-plugin-vue2-router'
import { optimize } from 'vite-plugin-optimize'
import html from 'vite-plugin-html'
import css from 'vite-plugin-css'
import { resolve } from 'path'
import { HappyPack } from 'vite-plugin-happy'
import vue from '@vitejs/plugin-vue'