开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记

发布时间:2022-12-28 22:30

1. 前言

        而接下来,我们即将开发一个前后端分离的后台管理系统VueAdmin。权限框架采用spring security,然后相对来说权限模块开发就多点代码,也仅此而已了。对了前端的系统界面也是我们一步步开发的,参考学习B站的MarkHub跟着他的进度来进行的,具体详细的过程可以参考他的B站链接。

2. 安装vue环境,并新建Vue项目

  1、接下来,我们安装vue的环境,界面化操作

# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm install --g vue-cli
# 打开vue的可视化管理工具界面
vue ui

上面我们分别安装了淘宝npm,cnpm是为了提高我们安装依赖的速度。vue ui是@vue/cli3.0增加一个可视化项目管理工具,可以运行项目、打包项目,检查等操作。对于初学者来说,可以少记一些命令,哈哈。
3、创建vueadmin-vue项目

运行vue ui之后,

开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记_第1张图片

会为我们打开一个http://localhost:8080 的页面:

开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记_第2张图片

我们将在这个页面完成我们的前端Vue项目的新建。然后切换到【创建】,注意创建的目录最好是和你运行vue ui同一级。这样方便管理和切换。

开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记_第3张图片

 然后点击按钮【在此创建新项目】下一步中,项目文件夹中输入项目名称“vueblog-vue”,其他不用改。

开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记_第4张图片

点击下一步,选择【手动】,再点击下一步,如图点击按钮,勾选上路由Router、状态管理Vuex,去掉js的校验。

开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记_第5张图片

开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记_第6张图片

 下一步中,也选上【Use history mode for router】,点击创建项目,然后弹窗中选择按钮【创建项目,不保存预设】,就进入项目创建啦。

稍等片刻之后,项目就初始化完成了。上面的步骤中,我们创建了一个vue项目,并且安装了Router、Vuex。这样我们后面就可以直接使用。

  • Router: WebApp的链接路径管理系统,简单就是建立起url和页面之间的映射关系
  • Vuex: 一个专为 Vue.js 应用程序开发的状态管理模式,简单来说就是为了方便数据的操作而建立的一个临时” 前端数据库“,用于各个组件间共享和检测数据变化。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号