WEB入门总结（三）前端：VUE+Element UI

1.学习网站

• Vue.js官网

  https://cn.vuejs.org/v2/guide/installation.html

• Element UI

  https://element.eleme.cn/#/zh-CN/component/layout

• Vue.js 菜鸟教程

  https://www.runoob.com/vue2/vue-tutorial.html

• HTML 菜鸟教程

  https://www.runoob.com/html/html-tutorial.html

• CSS 菜鸟教程

  https://www.runoob.com/css/css-tutorial.html

• JavaScript 菜鸟教程

  https://www.runoob.com/js/js-tutorial.html

• JavaScript教程 - 廖雪峰的官方网站

  https://www.liaoxuefeng.com/wiki/1022910821149312

2.登录注册实战例子（待补充）

1）整体框架

（1）增加组件

front/src/components下增加Register.vue和Login.vue。

（2）App.vue


(3)main.js

加入代码：

import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css'

Vue.prototype.$axios = axios;

引入axios作为后续的前端接口使用。我们可以看到引入axios那有黄色波浪线，出现这个是因为还没有下载。把鼠标移到’axios’那alt+enter选择 Install ‘axios’ as dev dependency。

下载完后：

（4）router/index.js

3.学习心得体会

1）我的流程

（1）百度网页照片

作为一个缺乏审美的工科生，我觉得让我脑子里自己想好做啥页面，真的很难。脑袋一片空白hhhhhh。一般我就简单粗暴地百度照片。当然，这获得了我学习设计的老弟的鄙视，所以他安利我这个网站。但是我也没咋用。开玩笑！美则美矣，但小白我也没能力做出来哇。

• 设计导航

http://hao.shejidaren.com/

（2）找例子+看官网和教程

（3）写页面代码 [ 主要是< template > 和 < style > ]

（4）启动前端，实时查看页面情况。

在IDEA终端Terminal的前端目录下执行命令：

npm run serve

（5）写功能代码 [ 主要是< template > 和 < script > ]

2）杂七杂八

（1）强烈安利vue调试工具vue-devtools！

我经受过的痛就不多说了，请看！
我用的浏览器是chrome内核的，所以我就只贴chrome浏览器的安装方法啦~

• vue调试工具vue-devtools的安装（win10系统,最新2020年6月的解决方案）

  https://www.jianshu.com/p/79eefcc5418f

• vue-cli2/3下使用vue-devtools插件

  https://www.jianshu.com/p/45d99c4da6bd

4.遇到的坑

（1）代码块层次问题

当时写分页时，@size-change="handleSizeChange"的方法死活是灰色的，识别不了方法。找了网上各种各样的方法，有什么methods写错写成method啥的，我都没有犯这种错误。最后才发现我有个方法多打了一个}，然后methods块结束了，我的handleSizeChange没有被包含进去，真的气死我也！

（2）validate表单验证

这个这个这个我真的无语了，到2020.6.25我的bug还没有解决，真的很玄学，不多说。严重怀疑不是vue就是elementui有bug。

（3）$refs

我在表单验证里头使用它。
ref的名字最好是表单名字+“Ref”，举个例子：resFormRef。
然后引用的时候用

this.$refs.resFormRef.validate(…) 或者.clearValidate()

而不建议使用 this.$refs[formname].validate()。虽然官网是这么写的，但真的有bug啊啊啊啊啊啊！