一、项目介绍

环境：

win11、vscode

技术：

• springboot2.5.9
• springsecurity
• Redis
• mybatis plus
• mysql5.7.38
• swagger
• jwt
• vue2
• element ui
• vuex
• vue-router
• axios
• mockjs
• echarts
• less

模块：

1. 登录页面
2. 首页
3. 权限管理1.用户管理2.角色管理3.菜单管理

功能要点：

1. 从0到1实现项目前后端搭建
2. vuex实现面包屑和Tag功能
3. vuex+localStorage动态路由和菜单（重点）
4. 封装一个ECharts组件
5. 封装Table表格
6. 树形表格和CheckBox的使用
7. 封装统一返回类
8. 两种方式实现代码生成，解放双手
9. jwt、swagger、Redis封装
10. 权限管理（重点）

二、脚手架的搭建

在软件开发领域，尤其是web应用程序开发中，“脚手架”（Scaffold）通常指的是一个预先配置好的项目模板或初始结构，它包含了基本的文件组织、依赖项设置、配置文件、示例代码以及必要的框架集成，旨在帮助开发者快速启动新项目的开发工作，无需从零开始手动搭建所有基础设施。

1. vue的环境搭建

进入Node.js中文网，下载Node.js，这里最好下载LTS（长期维护版），据说14比较稳定，我下载的是14.21.3

安装后可以在cmd窗口验证是否安装成功，输入node -v和npm -v，分别查看node.js版本和npm版本

找到安装目录，在该目录新建node_cache和node_global文件夹

创建完毕后，使用管理员权限打开cmd窗口，输入下面的代码：

npm config set prefix "D:\develop\Node.js\node_global"

和这一段代码：

npm config set cache "D:\develop\Node.js\node_cache"

接下来进入环境变量中，新建系统变量

然后在系统变量的path里新建一个%NODE_PATH%

这时候打开刚才你自己建立的node_global文件夹，看看会不会多出一个node_modules文件夹，如果没有多出，那就自己建一个node_modules文件夹，然后赋值你创建的node_modules文件夹的路径，到环境变量的用户变量里，将C:\user\15623\AppData\Roming\npm改成你复制的路径

配置完成后，在全局测试一个简单的代码，查看是否配置成功，cmd窗口输入下面的代码：

npm install -g express

出现类似这种界面就算成功

然后我们安装一下淘宝镜像，这个和我们使用清华源一个道理，注意：淘宝镜像在今年2月份刚刚换源，用我这里的才对

首先先看一下现在的镜像：

npm config get registry

输入下面代码：

npm config set registry https://registry.npmmirror.com

查看是否配置成功：

npm config get registry

如果显示是npmmirror就表明成功了

最后，有些文章可能会让下cnpm，这个其实没必要了

2.查看一下版本号

没必要都和我一样，大致一样即可

然后我们进入到我们自己的工作目录，例如我这里是Work，在这里输入cmd：

然后在打开的命令行中输入：

vue create 项目名称

这样就可以在Work目录下建立一个vue项目

例如，我输入vue create study，接下来会弹出这样的页面：

这里是让你去选择vue版本是vue2还是vue3，这里我们选择vue2（控制方式很简单：使用⬇和⬆进行控制，回车表示选择）

我们选择vue2后等待安装即可