Z-CLI Company Front-end Command Line Tool

Install

npm i -g @tool/z-cli --registry=http://npm.zkh360.com

Quick Start

创建项目

- 创建项目，appname 必填项
$> z create <appname>

- 选择模板，nodejs 项目选择 koa，web 端选择其他
$> select one skeleton for init project (Use arrow keys)
  ❯ koa - server
    vue-admin - client
    common - client-side common skeleton
    react - client-side react basic skeleton

- 确认，将会生成 appname 的文件夹，并拉取远程模板
$> are u sure?(Y/n)

- 参数模式 -t, --template
$> z create demo -t boss-admin
$> z create demo --template boss-admin

本地开发

- 本地开发
$> z serve

- 是否开启前端热加载模式
$> switch hot dev mode on? (Y/n) 

-开启后，将需要选择一个浏览器端项目
$>  select static project to runtime develop
    ❯ home 
      vue 

// 确认后，将启动本地服务

- 参数模式 -w, --watch
$> z serve -w home

- 参数模式 -s, --server-only, 仅运行服务端代码
$> z serve -s

添加浏览器端项目，仅针对针对初始化项目是 koa 类型的

- 添加项目
$ z add

- 选择一个浏览器端模板
$> select skeleton for static project (Use arrow keys)
  ❯ vue-admin - client 
    common - client-side common skeleton 
    react - client-side react basic skeleton 

- 输入项目名称
$> input project name

- 参数模式 -t --template
$> z add -t react

前端上传

$ z upload

> 特殊定制模式

参数：-c, --customized-flow, 该模式仅针对由 z-cli 创建的项目, 不适用其他使用场景
$ z upload -c

> 普通模式

参数：-t, --target <target>
$ z upload -t ./demo.png

参数：-m, --remote-path <path>
$ z upload -m demo

参数：-u，--username <username>
$ z upload -u demo

参数：-p, --password <passowrd>
$ z upload -p demo123

注意：

z-cli 生成项目启用静态域资源, 生效环境：生产

• 在 package.json 需要配置 remoteStaticCategory 字段，标示远程存放目录
• 单页应用需要设置 dynamic publicPath，保证资源加载正确
• 在上下文中 设置 ctx.state.useRemoteResource 开关，并设置为 true

设置 dynamic publicPath

1. 在 view 视图 html 中，绑定全局变量

...
<script>
  this.RES_PUBLIC_PATH = '{{ resUrl }}'
</script>
...

2. 在 webpack 设为 entry 的入口 js 中，添加

...
__webpack_public_path = window.RES_PUBLIC_PATH // eslint-disable-line
...

前端编译

$ z build [static project]

配置

$ z config

TODO