1. 项目初始化：用Vite搭建Vue3 + TypeScript项目

说实话，每次开始一个新项目，初始化这一步我都特别看重。为什么？因为项目骨架搭得好不好，直接决定了后面几个月你写代码的心情。我自己经历过那种「项目跑起来了，但想加个功能得改半天配置」的痛苦，所以这一章，咱们把地基打扎实。

1.1 为什么选Vite？

你可能听说过Webpack、Rollup这些打包工具。但Vite，我个人认为是目前Vue3项目最舒服的选择。原因很简单：

• 启动飞快：Vite利用浏览器原生ES模块，开发服务器秒启。我试过一个中型项目，Webpack启动要40秒，Vite不到2秒。
• 热更新丝滑：改一行代码，几乎感觉不到刷新延迟。这在调试UI细节时特别爽。
• 开箱即用TypeScript：Vite原生支持.ts文件，不需要额外配置babel。

1.2 创建项目

打开终端，执行下面这行命令：

npm create vite@latest my-vue-app -- --template vue-ts

这里解释一下参数：

• my-vue-app：你的项目名，可以随便改
• --template vue-ts：指定使用Vue + TypeScript模板

命令执行后，你会看到类似这样的输出：

✔ Project created!
  cd my-vue-app
  npm install
  npm run dev

嗯，到这里项目就创建好了。是不是很简单？

1.3 安装依赖并启动

按提示操作：

cd my-vue-app
npm install
npm run dev

浏览器打开 http://localhost:5173，你应该能看到Vue的欢迎页面。如果看到了，恭喜你，项目跑起来了。

1.4 理解项目目录结构

现在打开项目文件夹，看看里面都有什么。我用表格帮你梳理一下：

文件/文件夹	作用
index.html	入口HTML文件。Vite把这里当作应用起点，而不是像Webpack那样藏在内存里。
src/	你的源代码都放这里。组件、页面、样式、工具函数……全在这。
src/main.ts	应用入口文件。创建Vue实例、挂载路由、注册插件，都在这里做。
src/App.vue	根组件。整个应用的壳，通常只放路由出口。
src/components/	存放可复用的组件。比如按钮、弹窗、表格等。
src/assets/	静态资源，如图片、字体、全局样式文件。
tsconfig.json	TypeScript配置文件。控制编译行为、路径别名等。
vite.config.ts	Vite配置文件。插件、代理、构建选项都在这里配。
package.json	项目元数据。依赖、脚本、版本号等。

你可能会问：为什么没有 router 或 store 文件夹？因为Vite模板只给了最基础的结构。后面几章我们会自己加。

1.5 看看入口文件长什么样

打开 src/main.ts，你会看到：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

这段代码做了两件事：

1. 用 createApp 创建Vue应用实例
2. 挂载到 index.html 里的 #app 元素上

就这么简单。后面我们加路由、状态管理，都是在这个基础上扩展。

1.6 配置TypeScript

Vite模板已经帮我们配好了TypeScript。但有几个地方我建议你改一下：

打开 tsconfig.json，找到 compilerOptions，加上这几项：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这里重点说两个：

• strict: true：开启严格模式。我建议所有项目都开，虽然刚开始会报一堆错，但能帮你提前发现很多潜在问题。
• paths：配置路径别名。这样你写 import Button from '@/components/Button.vue' 而不是 ../../components/Button.vue。清爽多了。

1.7 配置Vite路径别名

光配 tsconfig.json 还不够，Vite那边也要同步配置。打开 vite.config.ts：

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

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

这样，你在代码里用 @/components/xxx 时，Vite就知道去 src/components/xxx 找文件。

1.8 验证一下

在 src/App.vue 里随便写点东西：

<template>
  <div>
    <h1>Hello Vue3 + TypeScript</h1>
  </div>
</template>

<script setup lang="ts">
const message: string = '项目初始化成功！'
console.log(message)
</script>

保存后，浏览器应该自动刷新，控制台能看到输出。如果一切正常，说明TypeScript和Vite配合得很好。

1.9 本章小结

这一章我们做了三件事：

1. 用Vite创建了Vue3 + TypeScript项目
2. 理解了项目目录结构
3. 配置了TypeScript和路径别名

你可能会觉得，这些配置网上搜一下就有，为什么还要花一节课讲？因为我想让你知道：每个配置项背后都有它的道理。后面30章，我们会在这个基础上一步步搭建出一个可维护、可扩展的项目架构。下一章，我们开始引入路由系统。