🚀 第一步：创建新项目
使用Vite脚手架创建项目
npm create vite@latest执行上述命令后，Vite会引导您完成项目创建过程：
输入项目名称（例如：
dormitory）选择框架（Vue、React、Vanilla JS等）
选择变体（如TypeScript、JavaScript）
项目创建命令示例
# 完整创建命令（可一次性指定所有选项）
npm create vite@latest dormitory -- --template vue📁 第二步：进入项目并启动
进入项目目录
cd dormitory # 进入您创建的项目目录安装项目依赖
npm install # 安装package.json中定义的所有依赖启动开发服务器
npm run dev # 启动开发服务器启动成功后，终端会显示本地访问地址（通常是 http://localhost:8080）
📦 第三步：了解项目结构和依赖管理
检查package.json文件
package.json 是项目的核心配置文件，包含：
项目基本信息（名称、版本等）
脚本命令（dev、build、preview等）
依赖列表（dependencies、devDependencies）
{
"name": "dormitory",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.0"
}
}依赖安装说明
# 完整命令
npm install
# 简写形式
npm i安装完成后，所有依赖会保存在 node_modules 文件夹中。
🌐 第四步：安装网络请求库axios
安装axios
npm install axios在项目中使用axios
// 在Vue组件中导入和使用
import axios from 'axios';
// GET请求示例
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error('请求失败:', error);
}
};
// POST请求示例
const postData = async (data) => {
try {
const response = await axios.post('https://api.example.com/data', data);
return response.data;
} catch (error) {
console.error('请求失败:', error);
}
};💡 补充的重要知识
常用的npm命令
npm install 包名 # 安装生产依赖
npm install 包名 -D # 安装开发依赖
npm install 包名 -g # 全局安装
npm uninstall 包名 # 卸载包
npm update 包名 # 更新包Vite常用命令
npm run dev # 启动开发服务器
npm run build # 构建生产版本
npm run preview # 预览构建结果🔧 项目结构说明
创建完成后，您会看到以下基本结构：
dormitory/
├── node_modules/ # 依赖包
├── public/ # 静态资源
├── src/ # 源代码
├── index.html # 入口HTML
├── package.json # 项目配置
├── vite.config.js # Vite配置
└── README.md # 项目说明
⚠️ 注意事项
Node.js版本：确保使用较新版本的Node.js（推荐16+）
网络问题：如果npm安装缓慢，可以使用国内镜像：
npm config set registry https://registry.npmmirror.com权限问题：如果遇到权限错误，可以尝试使用npx或检查npm配置
📝 总结
使用Vite创建项目非常简单快捷，只需要几个命令就能搭建起现代化的前端开发环境。记住这个流程：创建 → 进入 → 安装 → 启动，然后根据需要安装额外的依赖库如axios，就可以开始开发了！