天天看点

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

1、到gitee搜索芋道,即可搜索到相关的系统

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

2、将对应的源码下载下来,后端的搭建非常简单,后端是基于springboot的。基本上将mysql搭建好,安装上redis5系列才行,由于我之前使用了phpstudy,很方便管理,因此也推荐给大家,当然也会接一些php的活。不过它的redis支持的版本是3.x版本的,芋道管理系统是5系列的, 我下载了Redis-x64-5.0.14.1。将其做成服务,不然每次都会弹出黑窗口, 在cmd下执行 redis-server --service-install redis.windows.conf。

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

3、运行后端系统

mysql和redis安装完成后,执行sql脚本,mysql目录下的sql全部都执行。

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

更改配置,mvn install一下,后端即可运行起来了。

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

4、前端系统环境搭建(ts+vue3)

前端系统下载下来有四个工程,这里以vue3的来讲解。先看看node版本是否大于node-v16,我下载的版本是node-v16.6.2-win-x64,较低版本会出现各种问题。

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

进入到yudao-ui-admin-vue3目录中,查看package.json, 前端需要安装pnpm

npm install pnpm -g

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

分别执行安装和dev即可将前端工程启动

启动后登陆系统后

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

这里跟进一下代码,左侧的菜单部分是如何渲染的呢,通过store目录下的permission.ts的generateRoutes方法实现。

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

代码生成器大家可以使用一下,执行sql后记得将前端的storage清理一下,不然新加的菜单出不来,因为读取的缓存的。

基于若依框架的芋道系统(前端基于vue3+ts)开发环境搭建

如果大家在搭建过程中出现问题的话,可以关注,并私信给我。

继续阅读