vue3 vite 配置

### 配置 Vue3 项目使用 Vite 构建工具

#### 创建新项目
为了启动一个新的 Vue3 项目并利用 Vite 的优势，可以采用如下命令快速初始化项目结构：

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install

这组指令通过 `create` 脚本安装最新版本的 Vite 并指定模板为 Vue 来创建名为 `my-vue-app` 的应用[^2]。

#### 安装依赖项
一旦项目框架搭建完成，进入该项目目录并通过运行 `npm install` 或者 `yarn` 来获取所需的全部依赖包。此过程自动处理由 esbuild 加速的依赖预构建工作，显著缩短首次编译时间[^3]。

#### 修改入口文件
默认情况下，Vite 设置了一个简单的 HTML 文件作为开发服务器的基础页面 (`index.html`) 和一个主要的应用程序入口点 (`src/main.js` 或 `.ts`). 用户自定义组件可以直接放置于 `App.vue` 中而无需显式全局注册；只需确保它们被正确引入即可正常运作[^1].

对于 TypeScript 支持或其他特性需求，可以根据具体情况进行相应调整。通常来说，默认配置已经能够很好地满足大多数应用场景的需求。

#### 启动开发服务
准备就绪之后，可以通过执行下面这条命令开启本地开发环境:

npm run dev

该命令会启动带有热重载功能的服务端口，并监听源码变动以便即时更新浏览器中的显示效果。

#### 执行生产构建
当应用程序开发完毕准备部署时，则应使用以下命令来进行优化后的打包操作:

npm run build

上述流程将依据 Vite 内置的最佳实践对资源进行压缩、混淆等一系列处理措施，从而产出适合线上发布的静态资产集合。