跳至主要內容

学习不走弯路，通过《mall视频教程（最新版）》，使用更系统、高效的方式来学习mall电商实战项目吧！

mall项目前端开发环境搭建

macrozhengmall学习教程快速开始

mall项目前端开发环境搭建

在上一节课程中我们讲解了mall后端项目的开发环境搭建，这节课程我们来讲解下后台管理系统项目mall-admin-web和前台商城项目mall-app-web的搭建。

相关视频教程

mall-admin-web开发环境搭建

mall-admin-web已经升级至Vue3版本，之前的Vue2版本教程可以参考这篇：mall项目前端开发环境搭建（Vue2）

  • 下载Node.js并安装，需要使用v20以上版本（建议下载v20.x的LTS版本），下载地址：https://nodejs.org/zh-cn/download/archive/v20.20.0

  • 下载mall-admin-web的代码，下载地址：https://github.com/macrozheng/mall-admin-web

  • 使用VSCode或者IDEA打开mall-admin-web项目，这里以为VSCode为例；

  • 项目编译完成后，为提高依赖下载速度可以配置淘宝镜像源，在终端命令行中输入如下命令即可；
# 设置为淘宝的镜像源
npm config set registry https://registry.npmmirror.com
# 设置为官方镜像源
npm config set registry https://registry.npmjs.org
  • 在终端命令行中输入如下命令安装相关依赖；
npm install
  • 根据自己的后端服务运行情况修改后端路径（不搭建后端可以使用在线API），修改.env.development中的VITE_BASE_SERVER_URL配置；
# 后端API基础路径
# 不搭建后端，使用在线API可修改为（仅有查看权限）：https://admin-api.macrozheng.com
VITE_BASE_SERVER_URL = http://localhost:8080
  • 在终端命令行中输入如下命令启动mall-admin-web：
npm run dev
  • 访问地址查看效果：http://localhost:5173
  • 进行登录操作，可以发现调用接口路径和.env.development中的配置一致。

mall-app-web开发环境搭建

  • 首先下载mall-app-web项目的代码，下载地址：https://github.com/macrozheng/mall-app-web

  • 本项目使用了uni-app专用开发工具HBuilder X（App开发版）开发，下载地址：https://www.dcloud.io/hbuilderx.html

  • 下载完成后解压到指定目录，双击HBuilderX.exe文件打开HBuilder X；
  • 然后点击文件->导入选择从本地目录导入；
  • 项目导入成功后目录结构如下；
  • 点击工具->插件安装可以进行插件的安装，这里安装的插件如下，注意这里只有Git插件是我从这个功能中安装的，其他插件均会在项目运行时自动安装；
  • 然后点击运行->运行到浏览器选择chrome即可运行项目；
  • 如果你想修改运行端口的话，可以修改manifest.json文件，更改Web配置中的前端开发服务端口，这里为防止与其他项目端口冲突，我改成了8060；
  • 项目运行成功后，控制台会自动输出如下信息并打开chrome浏览器；
  • 按F12打开chrome浏览器的开发者工具，点击手机按钮切换到移动端视图，此时可以发现项目访问的是mall-portal模块提供的接口，访问地址：http://localhost:8060/

使用发行包部署

在《mall学习教程》中着重讲解后端内容，前端的代码基本仅做演示使用，所以说你也可以直接下载前端的发行包，部署到Nginx下面也是可以使用的。

  • mall-admin-web发行包地址：https://github.com/macrozheng/mall-admin-web/releases
  • mall-app-web发行包地址：https://github.com/macrozheng/mall-app-web/releases
  • 将mall-admin-web和mall-app-web的发行包解压到Nginx的html目录下，目录分别为admin和app；
  • 然后启动Nginx就可以访问了，后台管理系统访问地址：http://localhost/admin/
  • 前台商城系统访问地址：http://localhost/app/

项目源码地址

上次编辑于:
贡献者: macro

公众号

公众号图片