本文仅适合Javashop 7.0 版本
需求:拿到商城代码之后,如何进行前端UI开发
UI开发:
UI 分为
manager-admin 后台管理
manager-seller 商家中心
buyer-pc 买家PC端
buyer-wap 买家WAP端
1、必须组件:
安装nodejs(本文略过,自己学习)
安装完成后测试是否安装成功
# 两条命令都成功输出版本号,说明安装成功
node -v
npm -v
搭建开发环境
下载源码到本地(本文略过,自己学习)
项目基本结构(买家、后台管理、商家中心下简称三端)
├── buyer # 买家端
├── manager-admin # 后台管理
├── manager-seller # 商家中心
├── ui-components # 商家中心、后台管理公用组件
├── ui-domain # 三端公用api、domain设置
├── ui-utils # 三端公用脚本
├── deploy.sh # 生产环境部署脚本【可根据运行时的参数执行响应操作】
└── start.sh # 项目生产环境启动脚本【用于当机器重启后,直接启动买家端和nginx】
注:大部分开发机器都是windows,sh脚本可以无视了。
配置API地址、域名地址
进入ui根目录下的ui-domain文件夹,对应自己的实际环境修改里边的api.js、和domain.js。
拷贝三端公用脚本
对于Linux 系统或者生产环境:
回到ui根目录下,执行bash ./deploy.sh copy,此命令会将ui根目录下的三个公共文件夹分别复制到三端下的项目根目录里。
修改API模式 为了正确适配后台API环境,需要更改前台访问API模式【后端API为生产环境时,token需加密】
设置适配API为开发模式
bash ./deploy.sh api_dev
设置适配API为生产模式
bash ./deploy.sh api_pro
由于现在开发环境是windows sh脚本方法可以无视了
因此上面方法只能手工进行:
三个UI基本一致,这里以买家pc端为例。
将
├── ui-components # 商家中心、后台管理公用组件
├── ui-domain # 三端公用api、domain设置
├── ui-utils # 三端公用脚本
三个文件夹拷贝至各个UI源代码目录,例如买家pc端:ui\buyer\pc\themes\b2b2c_v5
安装依赖环境和运行
三端基本一致,这里以买家pc端为例。
调出Nodejs命令行
# 进入买家pc端目录
cd buyer/pc/themes/b2b2c_v5/
# 安装依赖。
npm install
# 运行开发环境
npm run dev
如果出现依赖安装报错,可试试用yarn安装依赖\ 全局安装yarn:npm install yarn -g\ 用yarn安装依赖:yarn install
也可以考虑cnpm
如不能运行,请检测api.js、和domain.js API后端是否正确,上面依赖安装是否报错
比较大的坑就是 Node-Sass安装问题,因为原装那个需要自己编译(需要Linux环境,需要自己安装Python2和C编译环境)
Cnpm 安装 Node-Sass出问题:
cnpm install 到Node-Sass出问题
一般需要先uninstall Node-Sass 再install Node-Sass成功然后再cnpm install 就可以了。
原装npm解决方法(本文略过,请自己学习)