vue-shop项目第一天（用于记录 个人学习）

vue-shop 第一天

一.项目初始化

1.安装vuecli脚手架（依赖于webpack）[前端自动构建工具]。

2.安装插件（element-ui）[第三方插件库]， 安装依赖（axios)[调用后端接口的模块]

3.需要将项目托管到码云[一个代码管理仓库]，码云ssh的简单配置。

4.配置一下git(第一次使用)，先进行本地提交，再根据提交 指令把仓库上传到码云仓库中。（第一次使用码云需要填写用户名以及密码）

5.进行后端配置（数据库用到mysql），安装数据库管理工具（phpstudy），利用工具把已经写好的sql文件添加到本地mysql数据库中。[电脑配置较差花了4分钟]。

6.运行后端服务器，首先安装依赖包，用node运行。 再利用（postman）[接口测试工具] 来根据后端服务器提供的接口文档，进行api可用性的验证。

二.实现登录功能

1.打开文件，查看工作目录的情况，切换到分支结构，进行代码的编写。

2.惊醒项目文件的清洁工作，还原基本。（此处遇到困难，eslint验证老报错，百般尝试无果，只好新建一个项目把vueui中的eslint标准降低再行尝试）！！！！解决：在建项目时候取消掉eslint插件的安装。

3.新建login.vue 完成结构的引用。 vue ui中安装less，css.loader安装完成但是编译运行失败【解决办法: 本地自行安装less的包即可解决】。

4.绘制登录组件。需要用到elementui需要在插件文件夾下导入插件。

知识点：css3 box-sizing属性 改变盒子的参考边框。加入字体图标。完善一下样式。

5.为表单添加数据绑定，并且为表单项添加一个简单的校验规则（element ui中的表单组件有说明。）

6.实现重置表单功能：为表单添加ref属性，点击重置按钮调用事件函数，函数的this指向vue组件，其中的$refs属性有表单ref的key，获取这个key就获取了表单的dom对象，再 调用（element ui）提供的Form Methods中的resetFields方法。

7.表单预验证：点击登录的先进行表单预验证Form Methods中的方法。

8.配置axios：（在main。js入口文件中）

import axios from 'axios'
//默认的请求根路径设置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

9.调用axios向后段发送请求。利用async await获取返回的数据，

 const {data: res} = await this.$http.post('login', this.loginForm);

进行对象属性的解构以及重命名。

10.登录结果的提示框：

//导入弹框提示组件
import { Message } from 'element-ui'
//改在到全局组件中
Vue.prototype.$message = Message

在函数中调用Message提供的方法就可以使用了。

11.将登陆成功后的 token（类似于凭证） 保存在客户端的 sessionStorage(仅在会话期间生效，localStorage在任何 时候 都生效)，

window.sessionStorage.setItem("token",res.data.token);

之后通过编程式导航跳转到 ‘/home’ 这个路由地址

this.$router.push('/home')