git+vue项目实战

一、项目初始化

二、git仓库

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

这个即为公钥，复制它里面内的内容，复制到公钥处

仓库创建成功之后，会出现如下界面

①执行git全局设置，注意两条都要执行，在win+R出现的黑窗口中执行

这里的命令是本地上传操作，注意 git add空格+.

自此以后，就将本地仓库上传到了git中，然后再git仓库中进行刷新，发现

三、安装API并检测

shift+右键

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

重新启动

四、登录

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

查看当前工作区是否干净

创建分支login，并查看

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

引入

路由重定向

加入图标

查看阿里图标使用

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

拿到实例化对象

点击重置按钮，打印数据

登录表单的预验证

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

启动Api

async和await

登录组件配置弹窗提示

登录组件登录之后的行为

sessionStorage和localStorage区别

登录成功之后

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

五、退出功能实现原理

加上这些东西，就可以符合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即可

七、商品分类编写

树形表格

element中没有树形插件

树形插件安装方法

八、商品列表

vue中安装富文本编辑器

富文本编辑器
安装lodashjs
安装Echarts

九、Vue项目优化上线

1、窗口切换时的进度条 nprogress

nprogress

2、

只有发布阶段才会去掉console

3.

4.

5. 6.通过CDN的方式优化 ElementUI