【Hello VUE】暴学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

回到顶部