目录

快速搭建一个VueTSVite项目

快速搭建一个Vue+TS+Vite项目

1、在一个文件夹下通过cmd打开,输入命令

npm create vite@latest

https://i-blog.csdnimg.cn/direct/09b704f0b0344698ad2fa47d5af3afb4.png

命名要为英文

2.选择项目框架

通过上下键位选择Vue框架:

https://i-blog.csdnimg.cn/direct/fb75bb01f57e42cda94bf4344a74afb4.png

选好按回车键

3.选择开发语言

选择TypeScript语言,方便后续开发:

https://i-blog.csdnimg.cn/direct/dd4b04340e0f43598562dd6980b264c1.png

创建好的项目目录为:

https://i-blog.csdnimg.cn/direct/b3e56b76ad784ebaa7ea74e5e4fea5c6.png

4.安装Vite依赖

接着在终端输入:

npm i

https://i-blog.csdnimg.cn/direct/1bca19dd87744b36ba14c38f33b6ebcf.png

5.启动页面

终端接着输入:

npm run dev

https://i-blog.csdnimg.cn/direct/f9652d0a949b4bc0ae1d94f942e80f2d.png

访问效果:https://i-blog.csdnimg.cn/direct/011a7dc2362f4cefb5f5533895276d73.png

6.目录结构解析

https://i-blog.csdnimg.cn/direct/285e870e820c45048b131cdf418e7bd1.png

├── src
│   ├── assets/          # 静态资源
│   ├── components/      # 组件 (.vue + .ts)
│   ├── App.vue          # 根组件(含类型检查)
│   ├── main.ts          # TS 入口文件(挂载 Vue 应用)
│    └── vite-env.d.ts    # Vite 类型声明
├── index.html           # 主页面
├── tsconfig.json        # TypeScript 配置
├── vite.config.ts       # Vite 配置(TS 编写)
└── package.json         # 包含 “type”: “module”