wp-generate
Version:
51 lines (41 loc) • 1.89 kB
Markdown
## 前后端分离方案基础构建
### 文件结构说明
* app/page/XXX/XXX 如(app/page/shop/newShop) 下面有index.js 主流程控制
* app/module/ 业务相关的模块(以功能划分文件夹)
* app/component/ 抽象程度高的组件
* mock/ mock数据文件存放
###本地运行步骤
* `git clone`
* `npm install`
* `npm start`
* 安装chrome插件 [下载](http://wiki.sankuai.com/pages/viewpage.action?pageId=424892736)
### 新建功能页面步骤
* 在app/page目录下新建文件夹,已经对应主js
* 增加app.json中的文件映射
* npm dev 同时启动项目和mock服务,即时修改刷新浏览器
### 数据mock
使用url匹配
'*/api/*' : 转发到线下
'*/mock/*' :转发到本地mock服务
使用美团[vane数据模拟工具](http://vane.sankuai.com/)
[mock文件编写规范](http://vane.sankuai.com/doc.html)
注意:文件命名需要为*.adoc.md 其中的接口会自动加入接口列表
mock服务启动后,修改mock文件,会自动刷新接口列表
本地需要安装vane的客户端
`npm install -g vane`
在项目根目录执行
`npm run mock`
即可开启mock服务
`npm run dev` 同时启动项目和mock服务,即时修改刷新浏览器
### 静态文件同步到后端服务器
* 需要在部署机器执行pre-deploy脚本后配置异步拷贝命令,copy静态文件到后端server
* 后端工程需要配置html页面相应的工程访问路径
### eslint
* 可在.eslintrc.json配置检查规则
* npm start会同步开启lint检查,如发生error会启动失败
* npm run lint 会检查所有app/目录下的文件
* 可以单独检查某个文件,eg: eslint app/page/page1/page1/main.js
### 关于侧边栏
侧边栏采用先富统一的侧边栏
在开发中 使用127.0.0.1访问本机时,会自动使用线下的UPM菜单
如果使用localhost访问本机,则会使用线上UPM的菜单