前端学习笔记——Vite项目从零开始构建

前端学习笔记——Vite项目从零开始构建

用于从零开始搭建 Vite​​ + ​​Vue 3​​ + ​​Vant 4​​ + ​​Element Plus​​ + ​​Vue Router​​ + ​​Pinia​​ + ​​axios + Git​ 的项目
方便我自己再次搭建，也方便大家使用
2025年5月14日 完成零一二三点的基本内容
2025年5月15日 补充Git分支部分内容

零、 命令汇总及相关文档

1. 命令汇总

# 创建项目
npm create vite@latest
# 进入项目
cd project02
# 安装依赖
npm install
# 启动项目
npm run dev

# 初始化本地仓库
git init
# 添加远程仓库
git remote add origin <你的远程仓库地址>
# 查看远程仓库
git remote -v
# 将所有修改添加到暂存区
git add .
# 查看状态
git status
# 提交到本地仓库
git commit -m "日志信息"
# 推送到远程仓库（首次）
git push -u origin master
# 推送到远程仓库
git push
# 查看分支
git branch -v
# 创建分支
git branch <分支名>
# 切换分支
git checkout <分支名>
# 推送到远程仓库（没有会自动新建远程分支​​）
git push -u origin <分支名>
# 拉取远程分支
git pull origin <目标分支名>
# 合并分支
git merge <源分支名>
# 删除本地分支（已合并的分支）
git branch -d <分支名>
# 强制删除本地分支（未合并的分支）
git branch -D <分支名>
# 删除远程分支
git push origin --delete <远程分支名>
# 重命名本地分支
git branch -m <旧分支名> <新分支名>

# 安装 Vant
npm i vant
# 安装 Element-Plus
npm install element-plus --save
# 安装 Vue Router
npm install vue-router@4
# 安装 Pinia
npm install pinia
# 安装 axios
npm install axios

注意：
将 <你的远程仓库地址> 替换为你 实际的仓库 URL（如 https://gitee.com/xxx/xxx.git ），且 不要保留 尖括号 <>
后续命令中的 <> 用法同理

2. 相关文档

Vite 文档：https://vitejs.cn/vite3-cn/guide/
Vue 文档：https://cn.vuejs.org/
Vant 文档：https://develop365.gitlab.io/vant/zh-CN/home/
Element-plus 文档：https://element-plus.org/zh-CN/
Vue Router 文档：https://router.vuejs.org/zh/
Pinia 文档：https://pinia.vuejs.org/zh/
Axios 文档：https://www.axios-http.cn/

一、 安装 Node.js

我之前安装过了，具体教程以后再补

Node.js官网: https://nodejs.org/zh-cn

点击上方导航栏的“下载”选项，选择适合自己的版本，点击下方绿色下载按钮
版本说明：LTS（Long-Term Support）是​​长期支持版本

按下 Win + R ，输入 cmd ，打开命令提示符，输入以下命令可以查看版本
如图所示，说明安装成功

node -v
npm -v

二、 创建 Vue 3 项目

1. 打开命令提示符

打开要创建项目的文件夹，点击上方路径栏的空白处，清空路径，输入 cmd ，按下回车

2. 创建项目

npm create vite@latest

按自己需要选择相应选项即可，下方给出每项注释和我的选择
如图所示，说明创建成功

3. 安装依赖

# 进入项目
cd project02
# 安装依赖
npm install

如图所示，说明安装成功

4. 启动测试

npm run dev

Ctrl + 左键 打开链接，或者 复制 链接到浏览器访问
如图所示，说明启动成功

三、 上传 Gitee 仓库

1. 安装 Git

我之前安装过了，具体教程以后再补

Git官网：https://git-scm.com/
Gitee官网：https://gitee.com

2. 新建远程仓库

如图所示，即为远程仓库地址

3. 初始化本地仓库

打开 ​Git Bash 终端，输入以下命令

git init

如图所示，多出 .git 文件夹，说明初始化成功

4. 添加远程仓库

git remote add origin <你的远程仓库地址>
# 查看远程仓库
git remote -v

如图所示，说明添加成功

5. 添加到暂存区

git add <文件>
# 将所有修改添加到暂存区
git add .
# 查看状态
git status

如图所示，说明添加成功

6. 提交到本地仓库

git commit -m "日志信息"

如图所示，说明提交成功

7. 推送到远程仓库

git push origin master
# 设置上游关联​
git push --set-upstream origin master
# 或简写为
git push -u origin master
# 后续在该分支下推送只需输入
git push

如图所示，说明推送成功

可以进入Gitee查看记录

8. 后续更新推送

git add .
git commit -m "日志信息"
git push

9. 分支操作

9.1 创建分支

# 查看分支
git branch -v
# 创建分支
git branch <分支名>

如图所示，说明创建成功

9.2 切换分支

# 切换分支
git checkout <分支名>

如图所示，说明切换成功

9.3 推送到远程仓库

# 推送到远程仓库（没有会自动新建远程分支​​）
git push -u origin test

如图所示，说明推送成功


这里用新建文件模拟在test分支下开发，然后推送到远程仓库

与前面的master分支推送到远程仓库同理（记得先切换到test分支）

git checkout test
git add .
git commit -m "日志信息"
git push origin test

如图所示，说明test分支推送成功

9.4合并分支

# 1. 切换到目标分支（接受合并的分支，如 master）
git checkout <目标分支名>

# *2. 确保本地分支最新（多人协作时避免推送冲突）
git pull origin <目标分支名>

# 3. 合并指定分支到当前分支（将 test 分支改动合并到当前分支）
git merge <源分支名>

# *4. 手动解决冲突文件（如果有）

# *5. 标记冲突已解决
git add <文件>

# *6. 完成合并提交
git commit -m "合并<源分支名>并解决冲突"

# 7. 推送更新到远程仓库
git push origin <目标分支名>

如图所示，说明分支合并成功

四、其它依赖项

下面只给出命令，后续更新详细教程

# 安装 Vant
npm i vant
# 安装 Element-Plus
npm install element-plus --save
# 安装 Vue Router
npm install vue-router@4
# 安装 Pinia
npm install pinia
# 安装 axios
npm install axios