【Hello VUE】暴学VUE之成果展示(一)
暴学VUE之成果展示
- 我的前端技能简单说明
- Vue脚手架的选择
- 项目:vue-elementui
- 项目前端使用的vue技术
- 项目的后端使用的java技术
- 前端vue实现的功能点:
- 改造前的项目功能展示
- 登陆
- 首页
- 用户管理--用户列表
- 用户管理--上传文件
- 改造后的项目功能展示
- 登陆
- 首页
- 用户管理--用户列表
- 用户管理--个人信息
- 例子--列表页
- 例子--编辑页
- 例子--上传文件
- 待续
这是我第一篇学习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之成果展示(一) 的全部内容, 来源链接: utcz.com/z/375580.html