【Hello VUE】暴学VUE之成果展示（一）

最新推荐文章于 2023-10-02 21:07:41 发布
最新推荐文章于 2023-10-02 21:07:41 发布
阅读量337 收藏
点赞数
分类专栏： vue前端 文章标签： vue vue-router axios vuex elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mandy_rxr/article/details/90171821
版权

暴学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之环境搭建（二）

天空大海草原
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
懂一点前端—Vue快速入门
我没有三颗心脏的博客
03-30 1006
01. 什么是 Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，是当下很火的一个 JavaScript MVVM 库，是以 数据驱动和组件化 的思想构建的。 MVVM 模式简述 下图不仅概括了 MVVM 模式 （Model-View-ViewModel），还描述了在 Vue.js 中 ViewModel 是如何和 View 以及 Model 进行交...
抽出20分钟,快乐学习Vue
很高兴你能看到这里
04-07 5971
快抽出20分钟,来学习今天的 vue 教程吧 🥤 , 万字长文,助你快速快乐学习 Vue
前端学习（2526）：Vuex成果和展示
歌谣的博客
11-05 237
Vue学习笔记(黑马前端)
最新发布
JayChouyyds589的博客
10-02 3441
黑马前端Vue学习笔记(未学完)
前端成果展示
04-21 668
这段时间一直在学习数据可视化的东西，主要用到D3.js库， 转载于:https://www.cnblogs.com/xiaodi914/p/4445640.html
Vue预习课2：Hello World 第一个程序
05-08
在这个例子中，我们有一个名为`title`的数据属性，其初始值为'hello,vue'。 1. **Vue的设计思想**：Vue的核心是数据驱动应用。这意味着开发者只需要关注数据的更改，而不必手动操作DOM。当数据发生变化时，Vue会...
Vue.js学习笔记之 helloworld
12-28
先来看一个简单的示例，Hello,World! <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue学习</title> [removed][removed] </head> <body> {{ ...
Vue3版本HelloWorld
08-02
首先，Vue3的核心改进之一是引入了Composition API。在Vue2中，我们主要使用Options API来组织组件逻辑，这可能导致代码结构混乱。Vue3引入Composition API，允许开发者将逻辑拆分成可复用的函数，提高了代码的模块...
vue helloworld
01-20
hello wolrd 的例子： https://blog.csdn.net/qq_38738510/article/details/101013380 查看有无问题： 新版本的有ｖｕｅ编译模式的区别。 乱码问题： 前天使用utf- 8 模式处理 3.相关demo学习 ...
Vue基础学习之项目整合及优化
12-12
import HelloWorld from '../../../../HelloWorld.vue' 一旦相对层次结构较深，我们就很难去定位所引入文件的具体位置，其实这并不是我们应该操心的地方，完全可以交给 webpack 来进行处理。在原生的 webpack 配置中...
AI企业分类前端网页成果展示
m0_72410588的博客
05-04 202
本项目构建AI企业分类体系，以便于更好地了解和比较不同类型的企业。网站分为四个页面，分别是Home、System、About、Contact。以上就是AI企业分类体系前端展示的全部内容。本项目的分类体系依据了AI企业的不同发展方向和业务特点，能够很好地帮助用户了解和比较不同类型的企业。同时，本项目提供了良好的用户交互体验，用户可以方便快捷地查看各个类目下的具体信息。
项目成果介绍写法
weixin_39976450的博客
08-30 3213
项目完成后，需要对项目成果概括介绍，但基于300到500字限制，不知如何写出效果很好的项目简介，充分展现项目成果： 成果依托什么项目（课题），开展了哪几项内容研究 项目成果突破了哪几项关键技术，形成哪些产品、装备，发表多少篇论文，授权专利几项等？ 成果在哪些地方推广应用，合同额达到多少？ ...
vue-项目完成的项目报告
qq_52347540的博客
03-26 2980
文章目录项目优化1.生成打包报告2.通过vue.config.js修改webpack的默认配置 项目优化 1.生成打包报告 第一种方法:命令行【不推荐】 vue-cli-service bulid --report 第二种方式：vue的可视化UI面板直接查看 在ui面板中查看打包的项目，并且进行优化 2.通过vue.config.js修改webpack的默认配置 通过vue-cli 3.0工具生成的项目，默认是隐藏了webpack配置项的，目的是为了让工作中心放在业务逻辑上面 然后配置webpa
Vue项目介绍
紫月i的博客
10-06 6645
1.Vue项目结构： build文件夹：项目构建（webpack）相关代码 config文件夹：配置文件夹，配置目录，端口号等等 node_modules:npm依赖的项目模块 src文件夹：开发目录 src包括： App.vue文件：项目入口文件 main.js文件项目的核心文件 router文件夹：存放路由文件，里面的index.js存放路由 component文件夹：组件文件夹 static文件夹：静态资源文件夹 index.html文件：主页面文件 package.json：配置文件 2.vue单
用vue开发一个app（3，三天的成果）
zzz19的博客
09-08 1万+
前言 一个vue的demo 源码说明 项目目录说明 . |-- config // 项目开发环境配置 | |-- index.js ...
初次写vue商城项目的一些流程及反思
mirror29的博客
11-01 1万+
前言      前段时间在负责某商城的前端，因为页面简单流程不复杂，遂大胆采用了vue框架来写该项目前端。之前有写过两个微信小程序所以上手vue难度也不算很高，毕竟思路是相通的只是某些写法不同罢了。但毕竟是在正式项目中第一次用vue，算是对自己这段时间学习的成果的检验，下面先介绍所采用的技术栈。 技术栈     首先用vue官方脚手架vue-cli搭建了项目，本来考虑ios端点击延迟问题引入...
Vue框架项目实战整理：3、Vue项目执行流程分析（一）
鲁迷那的专栏—坚持实践后再写出来！
12-20 2985
声明：本教程不收取任何费用，欢迎转载，尊重作者劳动成果，不得用于商业用途，侵权必究！！！ 系列文章 Vue框架项目实战整理：1、Vue开发工具介绍、快速启动、常见错误 Vue框架项目实战整理：2、Vue环境搭建（有图有真相） Vue框架项目实战整理：3、Vue项目执行流程分析（一） Vue框架项目实战整理：4、Vue项目执行流程分析（二） 目录 一、前言 二、回顾项目启动 三、执......
VUE项目总结
weixin_46340162的博客
01-28 3863
这个项目是基于vue2.6.10使用vue-cli3.10开发前后端分离的的学员管理系统。系统分为教师学生和首页三个模块。教师教师模块中可以对教师信息进行增删改查，学生模块还嫩选择不同的授课教师。该系统还有登陆注册修改密码功能。
前端面试总结（vue篇）
热门推荐
weixin_43734732的博客
07-21 2万+
vue的优点 1、vue是个轻量级的框架，是一个构建数据的视图集合，大小只有几十Kb 2、vue是组件化开发，适合多人开发 3、vue中的双向数据绑定更方便操作表单数据 4、因为vue是MVVM的框架，视图，数据，结构分离使数据的更改更为简单 5、vuex可以管理所有组件用到的数据，不需要借助之前props在组件间传值 6、官方文档通俗易懂，易于理解和学习； vue父子组件之间传递数据 1、父组件向子组件传递数据 通过props，例子如下 <template> <div> .
写一段前端网页代码展示hello world，用vue3
05-27
当然可以，以下是使用 Vue 3 编写的前端网页代码，展示如何在网页上输出 "Hello, world!"： ```html <!DOCTYPE html> <title>Hello, world! <script src="https://unpkg.com/vue@next"> <p>{{ message ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值