集合组件上传、组件拉取、和组件预览功能。
2017-06-26:项目数据已从 Leancloud 迁移至 Quark,组件文件也改为存储在 Quark,而不再存在文件系统中(当然编译及预览文件依然会存在文件系统)
Athena之父增加了本地的单组件编译功能,所以组件平台的编译将进行最大幅度的精简,且要解决一些稳定使用之后暴露出来的问题,而且,在文哥带领下经历过一轮漫长又艰巨的Vue+Vuex+Webpack业务实践之后,更加感受到组件平台古老的代码方式该有点改变了……敬请期待
AC要用上VUEX了,马上进入电气时代
- 前端 vue + vuex
- 后端 koa2 + phantomJS
- 数据存储
LeancloudQuark (凹凸实验室出品的 BaaS 产品)
- 后台自动截图预览
- 多态编译
- 安装 NodeJS 6.x
- 安装 phantomJS(>=2.1.1)
- 数据初始化指引
截图可能会出现截图里文字不见了的情况,因为——系统没有页面用到的字体,解决:
- 在centos中执行:yum install bitmap-fonts bitmap-fonts-cjk
- 在ubuntu中执行:sudo apt-get install xfonts-wqy
- 安装字体
STHeiti-Light.ttc
和STHeiti-Medium.ttc
git clone https://github.com/o2team/athena-component.git
cd athena-component
npm install
node install
cd app
npm install
npm run build
cd ../
npm start
- 前端配置:
./src/app.js
- 前端开发:
npm run dev
- 前端编译:
npm run build
- 后端配置:
./config/*
- 后端开发:
npm run dev
- 后端部署:
npm start
- 工具
- none
- ssh -i ~/.ssh/QCloud_O2 aotu@xxx.xx.xxx.xxx(chmod 600 QCloud_O2)
- ~/wwwroot/acp.aotu.io
- git pull
- pm2 restart xxx
router.post('/api/push', upload.single('widget'), api.push)
router.get('/api/pull/:id/:rename?', api.pull)
router.get('/api/down/:id/:rename?', api.down)
router.get('/api/business/list', api.business.list)
router.get('/api/classify/list', api.classify.list)
router.get('/api/widget/query', api.widget.query)
router.get('/api/widget/count', api.widget.count)
router.get('/api/widget/detail/:id', api.widget.detail)
router.get('/api/widget/info/:id', api.widget.info)
router.get('/api/account/list', api.account.list)
router.get('/api/account/add', api.account.add)
字段如无指定,默认类型为 String
- _Role,添加一角色
admin
- _User,添加一用户
admin
并关联至 _Role admin- username
- password
- Business,创建(限制写入)
- !name
- Classify,创建(限制写入),固定数据 = 标题+标签+选项卡+坑位+商品列表+挂件+优惠券+时间轴+其他
- !name
- Widget,创建(无限制),限制 _Role admin: delete
- oid 原Leancloud的id
- stamp ms 组件更新时间戳,不等同updatedAt,用于覆盖上传组件时比对更新时间戳
- package
- !name
- !author
- business (Pointer -> Business)
- classify (Pointer -> Classify)
- !platform (0 = h5 | 1 = pc)
- !pullTimes (Number default 0)
- state (Number default 0) 状态,0=正常 1=已删除
- appId
- moduleId
- Account,创建(限制写入),赋予 _Role admin: create, delete, update
- !name
(待确认)
- 全部或部分:
- 1个 images 文件夹 + N个图片文件
- 1个 HTML 文件
- 1个 CSS / SCSS 文件,如同时存在,SCSS 优先,CSS 被忽略,目前只支持预处理器
SCSS
- 1个 Javascript 文件
- 1个 JSON 配置文件(必需)
- 1个 capture.png 截图文件(可选)
- 不包含外层文件夹,无组件依赖
- 除图片文件,所有文件名跟组件名一致
- 组件命名务必要有一定的复杂度,避免跟CSS关键字、JS关键字、HTML标签相同,因为组件的重命名为纯粹的字符串替换
- 配置文件
data
字段填写编译组件的必要参数 - 配置文件
dataList
字段为多态服务,比data
优先,必须是一个数组,数组子项就相当于一个data
饿饿饿
- 组件上传选择
业务
和分类
- 组件上传分析SASS依赖,编译SASS
- 组件下载安置SASS依赖
- 组件重命名
- autoprefix
SyntaxHighlighter 自定义编译
gulp setup-project
gulp build --brushes=css,javascript,sass,xml --theme=default
问题归档:
Cannot assign to read only property 'exports' of object '#<Object>'
问题解决
要配对使用require和module.exports以及import和export default
所以自定义修改了 brush-base
的包