创建vite+vue3项目

### 使用 Vite 创建 Vue 3 项目

#### 准备工作
为了确保顺利创建项目，需确认已安装 Node.js 和 npm 或 yarn。这些工具允许通过简单的命令来初始化新项目并管理依赖项[^2]。

#### 初始化项目
打开终端或命令提示符，在期望的位置执行如下命令以启动项目创建过程：

npm init vite@latest my-vue-app -- --template vue

此命令中的 `my-vue-app` 是自定义的项目名称，可以替换为任何合适的名称；而模板选项指定了要基于 Vue 构建应用[^4]。

#### 安装依赖包
一旦项目框架搭建完成，进入新建项目的根目录，并运行以下命令之一来安装必要的依赖库：

对于 npm 用户：

cd my-vue-app
npm install

对于 yarn 用户，则应使用：

cd my-vue-app
yarn install

这一步骤会自动下载并将 Vite 及其他所需资源作为开发依赖添加至本地 node_modules 文件夹内。

#### 启动开发服务器
当所有设置都完成后，可以通过下面的指令开启本地开发服务：

针对 npm 用户来说是这样的：

npm run dev

而对于那些偏好于 yarn 的开发者而言则是这样做的：

yarn dev

此时应该能够看到浏览器中显示默认欢迎页面，表明一切正常运作。值得注意的是，得益于内置的支持特性，每当源码发生变化时都会触发即时刷新机制(HMR)，从而极大提高了迭代速度和用户体验质量[^1]。

#### 配置路径别名 (可选)
如果遇到因缺少路径别名而导致的问题，可以在配置文件 `vite.config.js` 中加入相应的映射规则以便简化导入语句书写方式:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": "/src",
        },
    }
})

上述更改使得可以直接采用更简洁的形式引用位于 src 下面的模块，比如 `import MyComponent from '@/components/MyComponent.vue'` 而不是完整的相对路径形式[^5]。