tao-template-decorate
店铺装修通用模板-淘系主题,支持PC装修、无线装修、小程序装修。
开发
项目基于 Fie fie-toolkit-next 套件搭建,Node: ~8.0.0,Tnpm: ~5.0.0, Fie: ~3.0.0。React16 + Fusion1.x,数据管理使用 rematch。PC和无线的预览依赖各自的PI loader(PC@献之、无线@辟蹊),小程序的编辑和预览依赖小程序framework @辟蹊,编辑表单使用动态加载方案@睿玄,编辑器中的预览器依赖预览器@彼洋,还会涉及到编辑的小工具部分@朔漠。更详细的内容可以在店铺装修白皮书找到。
关于主题
系统默认使用了 AStore 店铺装修的主题 @alife/dpl-aStore,如果需要替换主题需要更改
fie.config.js
和styles/theme.scss
两个文件。因为项目中使用了一些 icon,创建新主题时可以 clone AStore 的主题以保证图标兼容,也可以直接创建新主题然后去更改代码中的图标 type。
# 本地开发 fie start # 本地打包 # 发布时这一步不需要,但是可以本地检查打包情况 fie build # 发布预发 fie publish -d # 发布线上 fie publish -o
目录简介
- build: 本地打包生成文件
- data: mock数据
- demo: 本地demo
- src: 源码
- apiConfig: api配置
- components: 比较公用的小组件
- config: 配置文件
- config.js: 全局配置文件
- pages: 页面
- 404: 404页面
- backupList: 备份列表页
- decoratorTemplate: 编辑器的模板列表
- formEditor: 编辑表单(isv使用)
- isvDocPage: isv 文档页
- isvDocPortal: isv 文档首页
- isvPcDecorator: isv pc编辑器页
- isvTemplateAudit: isv 模板审核页
- isvTemplateManager: isv 模板管理页
- isvWirelessDecorator: isv 无线编辑器页
- itemCategory: 宝贝类目页
- moduleEditor: 模块编辑器(isv使用)
- pageList: 页面列表页
- pcDecorator: pc编辑器页
- pcPreview: pc预览页
- template: 模板列表页
- wirelessDecorator: 无线编辑器页
- wirelessPreview: 无线预览页
- styles: 样式
- trans: 多语言
- utils: 小工具
业务开发
- apiConfig下面的api配置需要遵循以下规则
- 第一个mock接口必须以/data开头
- 第一个mock接口必须与第二个真实线上接口保持一致
- 第一个mock接口必须在data目录下找到完全一致的文件
举个例子
这个配置中,'/page/getPageType'是线上真实接口路径。 '/data/page/getPageType.json'是本地mock接口路径 data/page/getPageType.json是项目中mock文件存放真实位置
getPageType: ['/data/page/getPageType.json', '/page/getPageType'],
- 如需代理日常/预发/线上请求,需要配置webpack.config.js中的preTarget变量(需要接口支持本地跨域调用)
const preTarget = 'https://pre-fliggy.design.taobao.com';
关于多语言
多语言内容统一放在trans
文件夹下进行管理,在美杜莎平台管理,默认使用中文打底。并不是所有页面都提供了多语言,因为在实践的过程中发现业务场景确实不需要。如果一定需要多语言支持,建议还是使用模板中的方法,工作量也不大。