Javashop 7.0 商城前端UI开发教程步骤

本文仅适合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解决方法（本文略过，请自己学习）