goose-ui

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，输入组件名称即可创建组件

打包策略

1. HTML文件平铺在www目录下，如果在pages有多级目录，生成的html文件命名方式是"目录层级.html"，例如页面保存到src/pages/demo/pagedemo，则生成的html文件名是demo-pagedemo.html
2. JS文件统一保存到js目录下，按照pages下的目录名称存放
3. CSS文件统一保存到css目录下，按照pages下的目录名称分别存放
4. 图片资源统一保存到img目录下

注意事项

1. 如果在调试过程中报错，错误内容类似下面的日志，这是由于项目依赖的资源较大，多次编译过程中导致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 <JSObject>
    1: byteLength(aka byteLength) [000001B5E9385939] [buffer.js:532] [bytecode=000001C76DAA79E1 offset=204](this=0x03ce209026f1 <undefined>,string=0x02ff758eac79 <Very long string[5244308]>,encoding=0x0257cd33ce59 <String[4]: utf8>)
    2: arguments adaptor frame: 3->2
    3: fromString(aka fromString) [000001B5E939BCE1] [buffer.js:343] [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

1. 打开新页面时的url: 统一是./xxx.html，其中xxx表示html的文件名，html文件名规范请参考打包策略部分
2. 尽量不要手工修改package-lock.json，避免工程运行报错