vue3 elementplus 开源代码 基于elementui的开源项目

目录

• 前言
• 项目简介
• 准备环境

• Redis数据库安装配置
• mysql配置
• 后台spring
• 前端配置

前言

最近开始稍微接触了点框架，本来是想学点开源项目什么的，但学起来耗得时间长，所以公众号和博客的文章都慢慢的停更了许久。之前的java多线程和反射都还没弄透，更别说java源码和JVM了，学习这件事真的需要坚持、耐心和不断总结 。github上满是开源项目，建议找一个适合的项目练练，看看它用到的技术，一个个吃透了，以后用到相同的技术就越发熟练，看代码如同行云流水，毫不费劲。今天就推荐一个十分火爆的开源项目el-admin后台管理系统，结合前端Vue使用 ，是一个不错的开胃菜。

---

项目简介

一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分离的后台管理系统

开发文档： https://docs.auauz.net/
体验地址： https://auauz.net/

账号密码： admin/123456 (默认密码都是123456)

	后端源码	前端源码
github	https://github.com/elunez/eladmin	https://github.com/elunez/eladmin-web
码云	https://gitee.com/elunez/eladmin	https://gitee.com/elunez/eladmin-web

这是用流行框架spring boot和vue实现的前后端分离的后台管理系统，不要被前后端分离吓到了，只是前后端的代码放在不同的地方而已，没有什么特别重要的技术难点。

---

准备环境

上面已经给出了项目的源码，把前后端的源码下下来就行了，之后要准备什么呢？当然是准备跑项目的环境了，可以分为前端和后端的运行环境。在项目里，是需要后端的，所以先配置后端环境。那我们如何知道应该配好怎样的环境呢？看github项目的介绍，README文档里面也有介绍，以后可以直接看README就行了。既然是个Java项目，当然应该有Java的环境啦，这个可以直接用IDEA代替，社区版的也行，项目的文件就用IDEA打开就是了。

---

Redis数据库安装配置

如果没有，可在公众号内回复redis获取。下载好后，应首先配置它的环境变量。分别打开redis-servr.exe和redis-cli.exe，如下：

---

mysql配置

项目里的eladmin.sql文件为MySQL启动脚本，了解后，并不是双击运行。前提应该有mysql和数据库管理器吧，没有mysql可以在公众号内的软件工具哪里找，应该有，记得配置环境变量。另外管理工具就别用SQL Server了，sqlyog也不错，官网有社区版的，就下的慢，推荐链接：https://pan.baidu.com/s/1PcVVkucLRf-49lHDPl6syA 提取码：w27i 。先建一个项目数据库。

接着用记事本或其他打开项目sql脚本，全选粘贴在询问一栏，并再次全选右键执行查询或摁F9。

结果没报错即可，都不要关闭这些。

---

后台spring

如果没有还有spring这个框架，不用太担心，这样大部分是框架依赖，所以交给IDEA去干就行了，前提是别把网断了，需要下依赖包。如何让IDEA自动下呢？在文件那点击setting设置，在Build,Execute那的Maven选项。

自动导入Maven项目

上图把编译器生成的字节码类型改为和jdk相同版本，我这里用jdk11编译，不然会报“不支持java 5版本，请使用6及以上版本”。更具体的操作可以自己搜索解决，比较简单。同样在项目的配置文件pom.xml里，需要添加相应的依赖属性。

//添加下面几个，如果没有就加上去
 <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 <java.version>11</java.version>
 <maven.compiler.source>11</maven.compiler.source>
 <maven.compiler.target>11</maven.compiler.target>

这时候还不能自动下载依赖包，可以手动刷新或者说重新导入项目，右键项目文件，在maven选项那点reimport就行了。

耐心等待后，就可以启动后台了，在eladmin-system下找到Apprun的Java文件，运行它。

结果如下，没报错就行！

---

前端配置

前端配置比较容易出错，报错了直接在命令行输出一大堆信息，关键是解决起来非常麻烦。配置前端呢主要是为了能让大家在本地就能看到效果，只有后端的项目，再好，没前端相辅相成，项目跑的也没意思！同样的套路，同样的逼数！首先咱们找到前端的文件夹，发现里面是没有前端的依赖的，这个不足为奇。那咱们就需要配置依赖了。主要是node.js , node.js 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境，可以用于服务端编程。我们把它下载后需要配置它的环境变量，目的是为了用他的包管理工具npm(nodejs package management)，那有什么用呢?

1  允许用户从NPM服务器下载别人编写的第三方包到本地使用
  2  允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用
  3  允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

在这之前，把文件夹里的package.json包修改一下，找到script那里，添加如下：

"scripts": {	//如果没有以下，则添加
    "dev": "vue-cli-service serve",
	"start": "node index.js",
    "server": "nodemon index.js --ignore client",
	"build": "vue-cli-service build",
  },

我们下翻，还能看到前端的依赖dependencies和环境需要的版本，node在8.9及以上，npm在3.0.0及以上。

"engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },

之后说白了，npm就是帮我们把前端需要的依赖给下了，方便生成前端页面。具体的nodejs的下载安装配置，可以搜索相关文章，这里就不多讲了。命令行‘npm -v’查看npm版本，能看到输出，说明配置成功。

npm config set registry https://registry.npm.taobao.org
 -g //设置淘宝镜像，加快下载依赖

cd进入前端文件夹内，输入"npm install"，开始下载依赖，之后文件夹内会多出node_modules文件夹，命令行中不出现报错就行，报错的话可能有几个原因。

1. 网络原因，下载中断了，或下载较慢
2. package依赖包没配置好，应先配置好
3. 版本低，检查一下
4. 如果不是以上原因，可能是某一个具体因素导致的，就需要仔细查看命令行报错了，很可能是某个依赖没有下好，可以直接进入文件夹查看，如果没有则真的没下好，可以：npm
   uninstall xxx;再npm install xxx，重新来一遍。

---

然后一切顺利，“npm run build: prod”；“npm run dev”；前端就跑起来了！结果如下：