7.0前端开发环境搭建文档

安装Python2

  • 访问 https://www.python.org/downloads/ 从官网下载并安装最新的Python2版本

  • 安装完成后测试是否安装成功

      # 输入版本号，说明Python安装成功
  python --version

安装nodejs

如果遇到网络问题，可以到nodejs中文网下载 http://nodejs.cn/download/

  • 访问 https://nodejs.org/en/download/ 从官网下载8.10版本进行安装

  • 安装完成后测试是否安装成功

      # 两条命令都成功输出版本号，说明安装成功
  node -v
  npm -v

使用淘宝源：

npm install --registry=https://registry.npm.taobao.org
或 （如果安装了yarn）
yarn install

如果部署node-sas模块出错，请切换到root账号再install: （或者使用yarn）

sudo -i

搭建开发环境

在此之前请安装好Git，并配置好相关环境

  • 下载源码到本地

      # 克隆项目
  git clone https://gitee.com/enation/ui.git

  • 项目基本结构（买家、后台管理、商家中心下简称三端）

      .
  ├── buyer          # 买家端
  ├── manager-admin  # 后台管理
  ├── manager-seller # 商家中心
  ├── ui-components  # 商家中心、后台管理公用组件
  ├── ui-domain      # 三端公用api、domain设置
  ├── ui-utils       # 三端公用脚本
  ├── deploy.sh      # 生产环境部署脚本【可根据运行时的参数执行响应操作】
  └── start.sh       # 项目生产环境启动脚本【用于当机器重启后，直接启动买家端和nginx】

  • 配置API地址、域名地址

    进入ui根目录下的ui-domain文件夹，对应自己的实际环境修改里边的api.js、和domain.js。

  • 拷贝三端公用脚本

    回到ui根目录下，执行bash ./deploy.sh copy，此命令会将ui根目录下的三个公共文件夹分别复制到三端下的项目根目录里。

  • 修改API模式 为了正确适配后台API环境，需要更改前台访问API模式【后端API为生产环境时，token需加密】

      设置适配API为开发模式
  bash ./deploy.sh api_dev

  设置适配API为生产模式
  bash ./deploy.sh api_pro

  • 安装依赖环境

    三端基本一致，这里以买家pc端为例。\

      # 进入买家pc端目录
  cd buyer/pc/themes/b2b2c_v5/

  # 安装依赖。（安装了yarn可执行yarn的命令）
  npm install / yarn install

  # 运行开发环境
  npm run dev / yarn run dev

    如果出现依赖安装报错，可试试用yarn安装依赖\ 全局安装yarn：npm install yarn -g\ 用yarn安装依赖：yarn install

  • deploy.sh脚本命令

    命令示例：bash ./deploy.sh git-pull

命令 描述 备注 开发环境 生产环境
git-pull 从git更新最新脚本 将本地文件覆盖为git仓库中的最新代码，各个项目根目录下ui-domain、ui-components、ui-utils不受影响 √ √
copy 拷贝公共脚本 拷贝ui-domian、ui-components、ui-utils到各个项目根目录下 √ √
base 部署基础环境 用于部署nodejs、pm2、nginx环境（nginx.conf需自行配置） √
api_dev 适配后端API为dev模式 当后端API为dev时，使用此命令。 √ √
api_pro 适配后端API为pro模式 当后端API为pro时，使用此命令。 √ √
manager-admin 部署后台管理 单独部署后台管理代码 √
manager-seller 部署商家中心 单独部署商家中心 √
buyer-pc 部署买家PC端 单独部署买家PC端 √
buyer-wap 部署买家WAP端 单独部署买家WAP端 √

手动适配API环境

如果需要手动适配API环境，需要修改5个地方。

dev表示API为开发环境，pro表示API为生产环境。与前端无关

  • 配置文件
      # 修改api_model为dev或pro
  ui/ui-domain/index.js
  • 买家PC端
      # 修改api_model为dev或pro
  ui/buyer/pc/themes/b2b2c_v5/ui-domain/index.js
  • 买家WAP端
      # 修改api_model为dev或pro
  ui/buyer/wap/themes/default/ui-domain/index.js
  • 商家中心
      # 修改api_model，为dev或pro
  ui/manager-seller/ui-domain/index.js
  • 后台管理
      # 修改api_model，为dev或pro
  ui/manager-admin/ui-domain/index.js
    建议使用脚本修改，更加方便。
    # 在ui目录下：
bash ./deploy.sh api_dev
# 或
bash ./deploy.sh api_pro

results matching ""

    No results matching ""