胡乱一些话
感觉好像没啥可以说的QAQ
建议大体先是浏览一遍相关知识点吧。感觉也不需要真的逐个逐个学完学懂 ，（因为大概率你会发现看不懂T_T，而且会没耐心，会消磨兴趣。） 有个大体框架即可，实战时方便我们迅速定位知识点发现问题并高效 （我感觉并不哈哈哈） 解决问题。 （在“不懂什么内容”都不知道的情况下要解决问题真的又痛苦又低效QAQ）
所以我先介绍一波我的学习网站。
有了框架之后，二话不说开干吧。我建议找别人的代码，然后一句一句学。至于怎么找，也是有点学问的。如果我们东找西找，不同人写的思路不一样，对于半吊子的我们来说就真的太痛苦了。如果我们找的代码没有成品，感觉也白忙活。 前端前端，没有个成品页面，怎么好意思说自己做前端？
我建议按照功能模块，代码完整性，有无成品页面来选择。
所以接下来我再安利一些实战例子。
最后我再说说一些我自己的学习心得体会以及遇到的坑坑吧~
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.实战例子
-
新冠-物资管理系统，前后端分离系统 Vue+SpringBoot，【代码开源】。
强烈安利这个大佬写的系统，感觉真的很详细很实用。如果有不懂的还可以在下边请教，真的超级棒~这个系统不只有前端的内容，还包括后端、接口和数据库等等。如果是全栈开发（前后端都是一个人开发），我感觉好好学习这个也能获益匪浅嘻嘻！
不过这个只有代码，没有一步步的教程，建议大家在掌握一定基础，知道些所以然之后再学这个，不然可能看不懂，哪哪都容易报错。
https://www.zykcoderman.xyz/web/post/detail/373
https://www.zykhome.club/#/login
我的前端学习从登陆注册开始，所以我下边的例子都是关于登陆注册的。
有亮点的地方我会标一标，我安利的可能也不一定适合大家，大家按需自取吧。
不同的例子适合学习不同的东西：css，vue（axios、store，router），elementUI…… （至于哪个适合学啥我就不说了，懒，而且这都是看个人的） 所以大家一定不要局限在某个例子死磕~
例子也不是越详细越好，唔，只能自己慢慢琢磨吧~ 奥利给！
-
第一个 ElementUI 页面 (登录页)
这个有整体目录的介绍，感觉从这个开始比较好懂。
https://www.jianshu.com/p/96143f0917aa
-
vue+elementUI完成注册及登陆
https://www.cnblogs.com/xmf3628/p/11425152.html
-
vue，element-ui 登陆注册面板
https://blog.csdn.net/bw_yyziq/article/details/84634119
-
用vue+element-ui快速写一个注册登录页面
https://blog.csdn.net/Z_zfer/article/details/82260003
-
Node.js+Mysql+Vue+ElementUI 实现登录注册注销功能
https://segmentfault.com/a/1190000014268935
-
使用vue制作简单的登录页面（含验证码）
https://blog.csdn.net/weixin_44010187/article/details/97110426
-
Springboot + Vue实现完整的登录注册功能
https://blog.csdn.net/Small_Pang/article/details/102569573
-
用vue+element-ui+springboot快速写一个登陆页面（1）
https://blog.csdn.net/qq_39999139/article/details/103328335
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啊啊啊啊啊啊！