git+vue项目实战

来源：99网

一、项目初始化

二、git仓库

没有公钥，按照里面的提示步骤进行获取

三、安装API并检测

shift+右键

输入cls清屏
接下来将API跑起来

重新启动

四、登录

没有跨域，使用session或者cookie，有跨域那么使用token

查看当前工作区是否干净

创建分支login，并查看

main.js是项目的入口文件，将App.vue中的页面删掉
删除的时候，注意将空格去掉，否则会报错

引入

路由重定向

加入图标

查看阿里图标使用

点击此链接，复制到css文件中

拿到实例化对象

点击重置按钮，打印数据

登录表单的预验证

登陆组件根据根据预验证是否发起请求

启动Api

登录组件配置弹窗提示

登录组件登录之后的行为

登录成功之后

路由导航守卫控制路由访问权限

五、退出功能实现原理

加上这些东西，就可以符合Eslint的格式要求

登录功能上传到git

git add . 上传到暂存区中

git commit -m “完成了登录” 提交到本地仓库中

git branch 发现在login分支中，所以提交到了login本地仓库中，将login分支合并到master中（先得切换到master中，然后将login合并到master中）

此时在master，将其推送到git中

将本地分支login推送到仓储为origin，的login子分支下保存

总结每次将写完的功能，先合并到主分支，然后将主分支提交，然后将别的分支提交

六、主页编写

<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header
      >Header
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">Aside</el-aside>
      <!-- 右侧内容主体 -->
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
  },
}
</script>

<style scoped>
.home-container{
  height: 100%;
}
.el-header{
  background-color: #373d41;
}
.el-aside{
  background-color: #333744;
}
.el-main{
  background-color: #eaedf1;
}
</style>

通过接口获取菜单数据

发起请求获取左侧菜单数据

实现路由首页的重定向

//这样就可以先将home中的组件加载了，然后跳转到welcome中

左侧菜单改变为路由链接

这样就可以实现对应跳转，点击某一项菜单栏

用户列表开发

左侧菜单栏点击高亮

点击用户列表

绘制用户列表

获取用户数据

用户功能提交git

创建一个新的分区

检查user中的文件状态

添加到user暂存区

提交user区

user本地仓库提交到git

多了一个分支

将user分支合并到master主分支中

由于云端已经有了master分支，直接git push即可

全部频道