⭐ 作者简介：码上言
⭐ 代表教程：Spring Boot + vue-element 开发个人博客项目实战教程
项目部署视频
https://www.bilibili.com/video/BV1sg4y1A7Kv/?vd_source=dc7bf298d3c608d281c16239b3f5167b
文章目录
前言
这次拖了一个多月才更新，最近自己发生了很多的事情，有时间和大家一起聊聊，所以一直没来得及更新，这次终于能静下心来写文章了，在这期间我还谋划了一个大的规划，那就是整理Java。我将系统的进行学习，学习的同时我将会写基础的学习文章，估计要持续四个月左右吧，从Java基础到JavaWeb然后到Spring、SpringBoot、MySQL、redis、MQ、SpringCloud、Linux等等，到时候看情况再说。
这个小项目下面的教程我会带着前端一起写，后端的东西也就这些了，具体太复杂的功能这个项目先不写了，等系统的学完之后，我再重构一个项目，将所有的知识整合到一起，大概要到下半年了，不能许诺太长时间哈！现在我们先把剩下的东西写完，最起码也是我们一点一点的敲出来的，做出来也有成就感，当个毕设或者小作品的也还行。
最后关于基础的知识教程欢迎大家给我留言，以什么样的方式写，什么样的难度或者大家有自己的想法欢迎大家留言或者私信我！有想法就要去想，去做，万一实现了呢！
一、前端搭建
好啦，接下来我们进行前端项目的搭建，我选择的是用Vue来搭建后台，我们的重点是要将整个项目完成，有些不太懂前端，所以我这里先使用的简单的现成的框架进行二次开发，能最大限度的减少前端的开发，想具体学习Vue的大家以后可以自己学习或者可以和我一起来学。我这里隆重的给大家介绍一个后台管理的模板: vue-element-admin
官方网址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
根据官方的介绍，vue-element-admin是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
建议
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
集成方案: vue-element-admin
基础模板: vue-admin-template
桌面终端: electron-vue-admin
Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
Others: awesome-project
我使用的是基础的模板: vue-admin-template，这个对我们目前的项目来说足够了，想了解的大家可以自行看一看
前端的模板就用这个了，下面我们将它下载到本地并且在本地跑起来。
1、下载前端模板
首先我们是使用的基础版
下载地址：https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0
这里我们需要选择一下版本，我用的是3.11.0的版本。上面的图是我们刚进来的页面，这个是新的版本，我们点击那个master，找到tag/3.11.0，然后选择这个分支
选择好分支，然后点击右上角的Code，进行下载。
也可以克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git
如果下载不下来，可以从以下网盘中下载：
链接：https://pan.baidu.com/s/16KmkwFgisBrU408LsPNPCQ
提取码：bc7n
2、项目运行
我们现在已经有前端项目了，但是现在如何运行项目和编写vue代码呢，这时候就就要借助开发工具进行编写，这里我推荐的是Vs Code开发工具，相信大家也都听说过或者用过，具体的安装什么的我不再具体的讲解，版本都差不多，我建议不要汉化，要使用英文，顺便可以学习学习英语。地址：http://vscode.bianjiqi.net/
下载安装完之后，我们将下载的Vs Code打开，然后点击左上角的File，将项目导入进来。
点击左上角的文件，我这个好像是中文版的，两个都可以的。
打开项目：
每个项目的具体的功能，根据官方提供的目录机构，这个应该是完整版的，我们使用的是基础版的，基本上相差不大，都包含了基础版本的功能。
├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json
在我们了解目录结构后，下面我们要安装依赖，这时候我们就需要安装Node.js，可能对于新手来说node没有安装过，我这里提供下载的地址。
安装的教程我在网上找了一篇，我在这里不过多的介绍了，这一篇的篇幅会很长，安装软件我就省掉了。
安装教程地址：https://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html
待我们安装完成后，我们打开VS Code软件，然后Ctrl+j打开控制终端。
然后输入：
# 安装依赖 npm install
等待安装完成，有可能会失败，或者下载慢，可用以下的命令
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org
如果一直安装失败，可以给我留言，我发给你我下载好的，相信大多数都是可以的。
依赖安装完成后，我们开始启动项目
# 本地开发 启动项目 npm run dev
输入完成，回车等待项目启动，出现以下情况项目则启动完成。浏览器自动弹出并访问http://localhost:9528，这个就是我们访问的地址。
在浏览器访问我们的前端地址，看页面会出现登录的页面，是不是很简单，我们的前端项目到这里搭建完成了，接下来我们对前端的项目进行改造。
我们先点一下登录，看到以下页面，是不是很有感觉和成就感。哈哈
