从0到1配置vue项目跟git仓库连接！

前言

小编心血来潮，想出一集vue的项目配置，包括git和项目环境搭配，如下：

1-在gitee新建仓库

gitee.com/

这里是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教程到此结束，大家开冲!