前言
小编心血来潮，想出一集vue的项目配置，包括git和项目环境搭配，如下：
1-在gitee新建仓库
这里是gitee链接，我们在左下角新建这里新建我们的项目。
个人私有项目建议私有，我这里是演示则是开源。
新建好仓库，之后就有一个git的http链接。
2-桌面新建项目，打开vscode
在vscode打开之后，打开终端（ctrl+shift+~）
输入指令，然后写好项目名，然后选好技术栈，这里我们选择常用的Router和Pinia
npm init vue@latest
确认之后，输入指令
cd ac_gana
npm i
npm run dev
然后就打开我们的vue初始化页面
然后进入git bash。连接我们的远程仓库
之后输入以下指令
cd ac_gana
git init //初始化仓库
git remote add origin 仓库链接
git remote -v //检查是否连接上仓库
然后就输入以下指令：
git add . //缓存文件
git commit -m "feat:修改页面" //提交文件
git push --set-upstream origin master //推送代码
然后写项目之前，我们可以新建分支，养成好习惯。输入以下指令：
git branch 分支名（home）
git branch //查看分支
git checkout home //切换分支
然后我们在home分支上写代码之后也是执行以下指令：
git add . //缓存文件
git commit -m "feat:修改页面" //提交文件
git push --set-upstream origin home //推送代码
就能在gitee上看到我们的内容了。
3-配置路由
首先可以在src/assest下面把我们main.css替换成我们的reset.css文件。文件如下：
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}
然后我们在mian.js里面替换掉我们的css文件
然后开始配置我们的简单页面，先在app.vue里面把没用的文件删掉，留下路由跳转。然后可以删除掉没用的文件。HomeView.vue和AboutView.vue和components下的所有文件。
然后接下来配置页面路由（router.js)
先把import文件删掉，然后我们来修改routes路由配置路径：!
我来解释一下，有两种引入方式，一种是import引入，但是比较消耗性能，为什么？因为等你页面一多起来，全是import，就很消耗性能。
第二种写法是在component引入就好，代码如上，性能比较好。
然后我们在views下面新建我们的Home和Login文件夹，分别新建index.vue文件。
然后我们先在home的index.vue文件里面写点内容，可以使用快捷键（shift+<）点击第一个就是了，然后在微调一下代码，因为我们使用的是vue3，所以修改代码如下：
style的话看你使用什么类型，比如scss或者less或者其他。
然后我们在页面就能看见内容了：
写好页面之后，我们可以提交一下代码：
进入终端（ctrl+shift+`)然后选择 +号，点击git bash，之后也是输入指令：
git add .
git commit -m "feat:路由配置"
git push --set-upstream origin home
然后就能在gitee看见代码了
OK，AC教程到此结束，大家开冲!
