【Vue】搭建第一个vue3+vite前段项目

不要奇怪我为啥突然开始写前端的文章，唉，一切都是公司的任务罢了。

其实这周学习了前端和coverity，但是后者就算学了我也不能写在我博客里，所以还是写一写前端吧。

node.js 和 npm

npm是一个类似于 maven 的包管理器。

去以下地址下载 node.js：
https://nodejs.org/en

当然如果你访问费劲，可以访问这个中文网 https://nodejs.cn/，最新的 LTS 版本是 20.12.0.

安装后可以检查下 node.js 和 npm 的版本。

PS D:\Codes\CPP\VSCodeProjects\2024\March\vueProjectHello> node -v
v20.11.1
PS D:\Codes\CPP\VSCodeProjects\2024\March\vueProjectHello> npm -v
10.2.4

创建第一个项目

应该说，其实我对 Vue 之前的印象只是一个高级版的 JavaScript，但是现在的 Vue 确实很离谱。

在任何你想创建项目的地方打开终端输入：

npm create vue@latest

会自动要求你选择一些设置，我按个人喜好选择了以下的部分：

执行：

npm install

我以前是学 Springboot 的，这个命令类似于 Maven 的 build，将 package.json 中的包都下载到了本地项目目录中。

执行：

npm run dev

可以直接启动项目。

推送到 gitee

我的新电脑毕竟不是我的开发机，而我需要保证这个项目在我的新电脑和旧电脑都可以使用，还是推到远程方便一点。

初始化一个 Git 仓库：

git init

配置用户名和邮箱（不建议按官方配置用 global，尤其是你电脑有多个 git 用户的情况）：

PS D:\Codes\CPP\VSCodeProjects\2024\March\vueProject\sunrainWebsite> git config --local user.name "用户名" 
PS D:\Codes\CPP\VSCodeProjects\2024\March\vueProject\sunrainWebsite> git config --local user.email "邮箱" 

检查配置是否生效，可以看看 .git 目录下的 config 文件。如果你的 VS Code 没有显示项目目录下的 git 文件夹，可以在设置里把排除开关关掉：

在 gitee 上建立一个空仓库，然后设置此仓库为项目的远程仓库：

git remote add origin https://gitee.com/bluebonnet27/sunrain-website.git

然后 add、commit、push 就可以了。