# 前端开发环境搭建

# 安装nodejs

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

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

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

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

安装yarn

npm install yarn -g --registry=https://registry.npm.taobao.org
1

# 编译运行(pc端、卖家端)

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

# 下载源码到本地

# 克隆项目
git clone https://gitee.com/shoptnt/shoptnt-ui.git
1
2

项目基本结构(买家、商家中心下)

.
├── buyer/pc       # 买家端
├── manager-seller # 商家中心
├── ui-components  # 商家中心、后台管理公用组件
├── ui-domain      # 公用api、domain设置
├── ui-utils       # 通用工具
├── deploy.sh      # 生产环境部署脚本【可根据运行时的参数执行相应操作】
└── start.sh       # 项目生产环境启动脚本【用于当机器重启后,直接启动买家端和nginx】
1
2
3
4
5
6
7
8

# 指定api地址

修改/ui-domain/api.js 文件:


module.exports = {
  // 开发环境
  dev: {
    buyer_pc : 'http://127.0.0.1:3000',
    buyer_wap: 'http://127.0.0.1:3001',
    seller   : 'http://127.0.0.1:3002'
  },
  // 生产环境
  pro: {
    buyer_pc : env.DOMAIN_BUYER_PC || 'http://pc.shoptnt.natapp1.cc',
    buyer_wap: env.DOMAIN_BUYER_WAP || 'http://m.shoptnt.natapp.cc',
    seller   : env.DOMAIN_SELLER || 'http://seller.shoptnt.natapp.cc'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

修改dev节点中的api地址

# 安装依赖、运行

买家PC端:

# 进入买家端pc目录
cd buyer/pc 
    
# 安装依赖。(安装了yarn可执行yarn的命令)
yarn install --registry=https://registry.npm.taobao.org
    
# 运行开发环境
yarn run dev
1
2
3
4
5
6
7
8

买家端访问地址:

http://localhost:3000

卖家端

# 进入卖家端目录
cd manager-seller

# 安装依赖。(安装了yarn可执行yarn的命令)
yarn install --registry=https://registry.npm.taobao.org

# 运行开发环境
yarn run dev
1
2
3
4
5
6
7
8

卖家端访问地址:

http://localhost:3002

如果部署node-sass模块出错,请切换到root账号再install: (或者使用yarn)

 sudo -i
1

或者 设置 node-sass国内源

npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
1