跳至主要內容

学习不走弯路，通过《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已经升级至Vue3版本，之前的Vue2版本教程可以参考这篇：mall项目前端开发环境搭建（Vue2）

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

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

  • 在终端命令行中输入如下命令安装相关依赖；
npm install
  • 根据自己的后端服务运行情况修改后端路径（不搭建后端可以使用在线API），修改.env.development中的VITE_API_BASE_URL配置；
# 后端API基础路径
# 不搭建后端，使用在线API可修改为（仅有查看权限）：https://portal-api.macrozheng.com
VITE_API_BASE_URL=http://localhost:8085
  • 在终端中输入如下命令可以在浏览器中运行mall-app-web：
npm run dev:h5
  • 访问地址查看效果，可以发现调用接口路径和.env.development中的配置一致。：http://localhost:5173
  • 如果想打包成微信小程序运行，可以使用如下命令；
npm run dev:mp-weixin
  • 运行成功后会在dist\dev\mp-weixin目录下生成打包文件，并提示导入到微信开发者工具中运行；
  • 之后点击微信开发者工具中的加号导入dist\dev\mp-weixin目录，微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  • 然后项目就可以在微信开发者工具中正常运行了，具体效果如下。

使用发行包部署

在《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

公众号

公众号图片