QShop商城-快速开始-前端

qshop · 浏览次数 : 0

小编点评

**前端工具准备NodeJs前端环境** 1. 下载NodeJs版本: ``` wget http://nodejs.cn/download/current/ ``` 2. 默认版本为Node 16,可能找不到,建议下载版本为Node 16的版本: ``` wget http://nodejs.cn/download/current/node-16.x.x.tar.gz ``` 3. 使用vsCode打开项目目录: ``` code -p 3_PcAdmin ``` 4. 修改配置设置: * 打开 .env.dev文件 * 修改前端接口地址 * 保存文件 5. 在构建时修改环境变量: ``` .env.prod ``` 6. 部署前端: ``` npm run build ``` 7. 生成dist文件: ``` npm run build ``` 8. 创建网站: ``` mkdir dist cp -r ./* dist/ ``` 9. 上传dist文件: ``` scp dist/* deploy@yourwebsite.com:/ ``` 10. 查看QShop官网查看QShop源码QQ群: ``` 925862525 ```

正文

QShop商城-快速开始-前端

工具准备

NodeJs

前端环境为NodeJs,下载地址:http://nodejs.cn/download/current/ 。 默认会用版本为Node 16,如找不到我已分享: https://pan.baidu.com/s/1yM2TysvkH0pD7NdAAeXcag 提取码: y9c5

visual studio code

下载最新版的vs code,用来作为前端的开发工具。

打开项目

打开目录3_PcAdmin双击zQShop.code-workspace,使用vsCode打开项目

修改配置

设置后端接口地址 打开 .env.dev ,部署时应该修改 .env.prod .如下图 修改配置

安装依赖

安装依赖 终端=>新建终端=>输入npm install 启动npm 安装

运行前端

安装依赖后继续输入 npm run dev 启动运行

启动后端,请查看上一章[快速开始(后端)]

启动成功后,使用浏览器访问http://localhost:8888/即可打开界面 输入图片说明

部署前端

安装依赖后继续输入npm run build,生成dist文件

宝塔面板创建网站,将dist内文件上传至网站根目录即可,如下图

启动运行 启动运行

与QShop商城-快速开始-前端相似的内容: