VUE例子之慕课网

作为一个Java后端开发者,小编已经将近3年没有写过前端了,当年在学校学习时候,H5刚出来,我们都是用纯html标签+bootstrap样式来写网页的，还记得第一个网页写的是小米的官网。时隔3年后，再次有了一个新的念头,写写前端,刚开始小编想用React来写的，奈何React不支持双向数据绑定(其实是太难了,学不会_),于是就考虑了一个国产的VUE,听说VUE是很简单,于是我也跃跃欲试。前期断断续续积累支持大概一周时间。学习了基础语法。感觉还可以。没有React那么难。于是周末11/03就模仿写了一个慕课网的页面，用到的技术是VUE+饿了么的Element。

下面将过程分享出来，并谈谈我对现代前端模块化开发的感受。因为不是专业的前端开发,所以大神勿喷。

 

作品展示慕课网

image

技术栈: VUE + ElementUI + axios

• 第一部分: 主要模仿慕课网

• 第二部分: 利用axios网络请求,随机生成诗词,添加todoList

第一部分: 主要模仿慕课网

项目目录(主要分为5个组件)

image

页面分别对应的模块

image

navMenu.vue

主要包含一个慕课网的login和文本和搜索框。

image

然后从ElementUI中找到模板，并填充自己的内容。并添加css阴影样式

image

image

添加阴影

image

bannerCard.vue

image

到ElementUI找布局

image

Aside中添加10个按钮(并添加css样式保持背景颜色一样)

image

Header中添加一个走马灯

image

Main中添加四个(css样式参考慕课网)

image

image

segmentation.vue

分割符号（前后在模板中添加两个加载转圈的logo并css为红色文本作为变量支持自定义）

image

image

shopClass.vue

原理类似todoList定义个卡片,根据数量来展示

image

到ElementUI中找到卡片组件

image

image

todoList

另外因为是写的第一个VUE例子,也写了一个todoList的例子,放在页面下方。可以随机生成诗词并添加到todoList中

image

原理是:

利用axios请求一个诗词API并通过VUE双向绑定展示到input便签中,当添加按钮指定就添加到诗词list中。

下面利用v-for展示todoList

image

image

到这里基本所有的内容描述了，如果也要练习建议代码克隆下来,仔细研究。VUE是很简单的，小编总共就学习了不到1周的时间,如果要算总时间应该也不超过24小时。说这些的目的并不是炫耀而是说一个道理,就是编程都是想通的,当你会一门语言，那么在学习其他语言就都是简单的.编程都是面向对象。

总结下来，现代的前端开发已经和之前小编学习时候是今非昔比了,难度不亚于后端开发,不过组件是开发是可以二次利用的,定义好组件，很多地方都可以使用(就像上面的segmentation.vue和shopClass.vue一样)。感兴趣的同学可以来学前端。

个人博客: https://blog.springlearn.cn