goose-ui v0.0.7
goose-cli使用文档20190107
本次更新内容及迁移方案请查看docs/changelog.md
goose-cli的运行 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)
以下是node.js的下载地址
http://nodejs.cn/download/
安装完成可以在命令行输入以下命令查看当前安装的node版本和npm的版本
node -v
npm -v
项目需要从npm仓库中拉取,需要先配置代理地址
npm set registry http://node.wobuzaijia.host:4873/
使用命令从npm仓库中下载goose-cli到本地
npm install -g goose-cli
以下命令可查看当前仓库中goose工程的列表
goose list
初始化一个goose项目
goose init
项目初始化完成后在工程目录下使用npm下载依赖包
npm install
本地启动项目
npm run dev
构建生产离线包
npm run build
如下是本项目的工程目录结构
|-command goose公共配置文件 |-docs 项目的API文档和开发规范文档 |-node_modules npm下载的前端依赖插件(不可修改) |-public 存放默认模板页(骨架屏) |-www 存放打包生成的文件资源 |-src |-assets 公共资源 |-components 项目级公共组件 |-directives 公共指令 |-mixins 公共mixins |-plugins 公共插件 |-pages 存放交易页面文件 |-index index模块 |-index-skeleton.html 骨架屏页面 |-app.js js入口文件,用于配置本页面引用的资源 |-IndexApp.vue vue页面 |-package.json |-package-lock.json |-docs 相关文档 |-GooseSDK.md Goose SDK说明文档
在工程中创建新的交易页面
创建过程中需要输入页面名字并确认是否需要骨架屏
创建一个页面
在控制台中进入需要创建页面的目录,例如/src/pages,执行 goose init-page指令,输入页面名称、是否需要模板(即骨架屏)、页面标题即可保存页面
创建一个公共组件
在工程根目录,执行goose init-component,输入组件名称即可创建组件
打包策略
- HTML文件平铺在www目录下,如果在pages有多级目录,生成的html文件命名方式是"目录层级.html",例如页面保存到src/pages/demo/pagedemo,则生成的html文件名是demo-pagedemo.html
- JS文件统一保存到js目录下,按照pages下的目录名称存放
- CSS文件统一保存到css目录下,按照pages下的目录名称分别存放
- 图片资源统一保存到img目录下
注意事项
- 如果在调试过程中报错,错误内容类似下面的日志,这是由于项目依赖的资源较大,多次编译过程中导致JavaScript内存溢出,运行npm run init命令后,再运行npm run dev 即可
95% emitting CopyPlugin <--- Last few GCs --->
1568:0000021D5377B0C0 74253 ms: Mark-sweep 1378.6 (1419.2) -> 1378.5 (1419.2) MB, 252.2 / 0.0 ms (average mu = 0.257, current mu = 0.000) last resort GC in old space requested 1568:0000021D5377B0C0 74505 ms: Mark-sweep 1378.5 (1419.2) -> 1378.5 (1419.2) MB, 252.0 / 0.0 ms (average mu = 0.145, current mu = 0.000) last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 00000184EAEDC5C1]
Security context: 0x0257cd31e6e1 1: byteLength(aka byteLength) 000001B5E9385939 bytecode=000001C76DAA79E1 offset=204(this=0x03ce209026f1 ,string=0x02ff758eac79 <Very long string5244308>,encoding=0x0257cd33ce59 <String4: utf8>) 2: arguments adaptor frame: 3->2 3: fromString(aka fromString) 000001B5E939BCE1 [bytecode=00000031A...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: 00007FF7EF55ECE5
2: 00007FF7EF538196
3: 00007FF7EF538BA0
4: 00007FF7EF7C8D5E
5: 00007FF7EF7C8C8F
6: 00007FF7EFD069D4
7: 00007FF7EFD04768
8: 00007FF7EF8A73EB
9: 00007FF7EF8A9EED
10: 00007FF7EFABDF48
11: 00007FF7EF7BC26B
12: 00007FF7EF7E2406
13: 00007FF7EF52108C
14: 00007FF7EFD62E52
15: 00007FF7EFD642ED
16: 00007FF7EFD63349
17: 00007FF7EFD6322B
18: 00000184EAEDC5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! yonglong-mobilebank@1.0.0 dev: node command/generateI18N && vue-cli-service serve
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the yonglong-mobilebank@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Lucifer\AppData\Roaming\npm-cache_logs\2019-01-04T09_56_33_831Z-debug.log
> 2. 打开新页面时的url: 统一是./xxx.html,其中xxx表示html的文件名,html文件名规范请参考打包策略部分
> 3. 尽量不要手工修改package-lock.json,避免工程运行报错