这是我第一篇学习vue前端知识的博客,想通过分享,自己做一下总结,同时能帮助想学习vue技术的童鞋,希望你能得到一些启示。vue是目前最主流的三大前端技术之一,刚好有个同事是这方面的专家,我在学习过程中遇到的问题,都可以咨询专家,感谢。

我的前端技能简单说明

我在学习vue之前,有过python django开发经验,对html,css,javascript,jquery都有相应的了解,说不上精通,至少是能做东西。
我个人对django的模块开发已经到了忍无可忍的地步了,前后端代码无法分离。对我要实现的rbac(角色权限控制)功能支持极其不友好。本来是想使用jquery框架来实现前后端分离的,但是在查找了好多资料之后,没有找到现成的脚手架(最好是已经实现了登录,菜单的权限控制,列表页展示,翻页,编辑页等功能)。咨询了一下做前端的同事,就干脆直接上vue了。因为现在主流的前端技术都是Angular、React、Vue。

Vue脚手架的选择

vue脚手架比较有名的有两个:elementUI,iview。对这两个脚手架也是观摩学习了一周,怎么说呢,两个脚手架都是大而全。如果你不是有经验的前端开发者,一下子搞进去,会摸不着头脑。很容易就从入门到放弃了。感觉不适合从jquery时代的非专业前端准备的。当然如果你有个师傅领入门就另说,肯定是要选择这两者之一来学习的。学不动只能把眼光投入到浩瀚的github,选择其他开发者封装的脚手架。

项目:vue-elementui

github:https://github.com/yinjihuan/vue-elementui 或者 https://github.com/rongxr/vue-elementui
感谢作者yinjihuan,这是我能看懂的vue脚手架,以下的文章都是围绕着这个项目做改良。只要是样式的调整,哈哈哈。

项目前端使用的vue技术

vue
vue-router
axios
vuex
webpack
elementui

项目的后端使用的java技术

接口在elementui-api中,采用spring boot 开发

前端vue实现的功能点:

登录
未登录判断拦截
不同用户显示不同菜单
api请求统一封装
vuex状态控制是否显示头部文字
列表数据展示
分页功能
文件上传

改造前的项目功能展示

登陆

【Hello VUE】暴学VUE之成果展示(一)

首页

【Hello VUE】暴学VUE之成果展示(一)

用户管理–用户列表

【Hello VUE】暴学VUE之成果展示(一)

用户管理–上传文件

【Hello VUE】暴学VUE之成果展示(一)

改造后的项目功能展示

登陆

【Hello VUE】暴学VUE之成果展示(一)

首页

【Hello VUE】暴学VUE之成果展示(一)

用户管理–用户列表

【Hello VUE】暴学VUE之成果展示(一)

用户管理–个人信息

【Hello VUE】暴学VUE之成果展示(一)

例子–列表页

【Hello VUE】暴学VUE之成果展示(一)

例子–编辑页

【Hello VUE】暴学VUE之成果展示(一)

例子–上传文件

【Hello VUE】暴学VUE之成果展示(一)

待续

我对样式做了大量的改造。当然吃透程序代码也是必要的。如果心动想继续学习,期待后续的教程吧!

【Hello VUE】暴学VUE之环境搭建(二)

相关文章: