一.创建文件夹
1.准备一个文件夹，在里面输入cmd打开黑窗口
2.在命令行窗口执行以下命令可以创建基础项目，自己自定义选择，如果执行命令报错，检查下node版本是否过低，升级到18+再试。
npm create vue@latest
3.名称自起
3.1介绍
TypeScript：
作用：在 Vue 中使用 TypeScript 而不是 JavaScript
好处：
类型检查，减少运行时错误
更好的代码智能提示
提高代码可维护性
适合大型项目
推荐：✔️ 建议选择，特别是企业级项目
JSX 支持
作用：允许在 Vue 中使用 JSX 语法
适用场景：
需要复杂逻辑的组件
React 开发者转 Vue
需要动态生成复杂模板
注意：Vue 默认使用模板语法，JSX 是可选的
推荐：❓ 看需求，普通项目可以不选
Router（单页面应用开发）
作用：集成 Vue Router 进行页面路由管理
好处：
实现单页面应用（SPA）
页面间无刷新跳转
支持路由守卫、懒加载等
必须选吗：如果要开发多页面应用，必须选择
推荐：✔️ 大部分项目都需要
Pinia（状态管理）
作用：新一代 Vue 状态管理库（替代 Vuex）
适用场景：
组件间共享数据
全局状态管理（如用户登录状态）
需要响应式数据跨组件使用
推荐：✔️ 中大型项目建议选择
Vitest（单元测试）
作用：Vite 原生的单元测试框架
特点：
与 Vite 高度集成
速度快
支持 TypeScript
推荐：✔️ 企业级项目建议选择
端到端测试
作用：模拟用户操作的完整流程测试
常用工具：Cypress 或 Playwright
适用：
需要测试完整用户流程
确保核心功能稳定
推荐：❓ 看项目测试要求
ESLint（错误预防）（注意：你写的是 BSLint，应该是 ESLint）
作用：代码质量检查工具
功能：
检查语法错误
强制编码规范
自动修复部分问题
推荐：✔️ 强烈建议选择，保持代码规范
Prettier（代码格式化）
作用：代码格式化工具
功能：
自动格式化代码风格
统一缩进、引号等
与 ESLint 配合使用
推荐：✔️ 强烈建议选择，团队协作必备
方案一：企业级项目（推荐）
✅ TypeScript
✅ Router
✅ Pinia
✅ Vitest
✅ ESLint
✅ Prettier
方案二：快速原型/小型项目
✅ TypeScript
✅ Router
✅ ESLint
✅ Prettier
方案三：学习/练习项目
✅ TypeScript
✅ Router
✅ ESLint
- TypeScript + Router + Pinia 是 Vue 3 现代项目的标配
- ESLint + Prettier 确保代码质量，建议必选
- 测试相关（Vitest、端到端）可根据项目需要选择
介绍
OxLint
OxLint 是 ESLint 的一个实验性替代品或增强版
由 Vue 团队开发，专门为 Vue 生态优化
特点：
Vue 专用：
专门为 Vue 单文件组件设计
更准确的 Vue 语法检查
性能更好：
更快的代码检查速度
更好的缓存机制
集成度更高：
与 Vite/Vue 工具链深度集成
减少配置复杂度
实验性：
还在开发完善中
可能有一些不稳定
推荐选择吗？
学习项目/新项目：✔️ 可以尝试，体验最新特性
生产项目：⚠️ 谨慎使用，建议还是用成熟的 ESLint
已有 ESLint 配置的项目：❌ 不建议替换
rolldown-vite（试验阶段）
rolldown 是基于 Rust 的新一代 JavaScript 打包工具
rolldown-vite 是 Vite 的实验性集成
特点：
Rust 编写：
比 JavaScript 写的打包器更快
更好的构建性能
Vite 集成：
作为 Vite 的生产构建替代方案
使用相同的配置
实验性：
非常早期阶段
可能有兼容性问题
目标：
替代 Rollup（Vite 当前的生产构建器）
大幅提升构建速度
推荐选择吗？
学习/测试：✔️ 可以体验最新技术
生产项目：❌ 绝对不要用，太不稳定
追求稳定：❌ 不要选择
要学习就选yes
选择 "Yes"（是）
会创建一个最简化的 Vue 项目
包含：最基本的 Vue 3 配置
不包含：之前提到的所有可选功能
❌ 没有 TypeScript
❌ 没有 Router
❌ 没有 Pinia
❌ 没有测试配置
❌ 没有代码检查工具
相当于 Vue 的 "hello world" 项目
选择 "No"（否）或按回车（可能）
会进入详细配置模式
让你选择前面提到的各个功能
TypeScript
Router
Pinia
测试工具
ESLint/Prettier 等
画圈的依次执行即可
二： Element Plus安装和使用
安装第三方插件下面命令，安装完要在main.ts中引入才能使用，别忘记还要引入它的样式文件
npm install element-plus --save
Axios安装和使用
调接口我用的比较多的就是axios了。安装完成后，一般会封装一个request.ts文件，用来编写请求拦截器和响应拦截器以及接口请求地址。再把要用的接口封装到一个或多个单独的文件api.ts里，api.ts会引用request.ts ，为每一个接口定义一个方法并导出，页面上用的时候就可以直接调用api.ts里的方法了，这样通过api.ts统一管理我们用的接口就很好。
axios请求拦截器：通过可以统一为接口请求添加token等一些请求头
axios响应拦截器：拦截错误码401 500 404等统一给出提示或跳转处理，优化用户体验
npm install axios
需要删掉的东西
app.vue全局配置里面东西不想要删除留下下面的东西即可
这样就行
在main里面添加以下东西
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
npm run dev启动项目
http://localhost:5173/about 访问