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啊啊啊啊啊啊!