@tuax/cli

@tuax/cli

介绍

这个包为tua提供了一些方便的命令，可以用于一键生成项目、创建页面、创建组件、创建 api 等功能。

安装

$ npm i -g tua
# OR
$ yarn global add tua

使用

初始化项目 init

这个命令从用户输入的模版地址拉取项目模版，替换package.json中的项目相关信息

$ tua init <project-name>

添加接口命令 add api

这个命令将添加一个新文件 <name>.js 到 src/apis/ 下，并且如果不存在 src/apis/index.js 则会自动创建。

# 添加 api
$ tua add api <name>
# OR
$ tua a api <name>

该命令会自动在 src/apis/index.js 中导出该 api，例如 <name> 为 foo-bar，那么导出的接口名称为 fooBarApi（已转成小驼峰，并在结尾加上 Api）。

添加页面命令 add page

这个命令将添加一个新文件夹 <name> 到 src/pages/ 下，

并且如果页面以连字符命名，那么相关的 .vue 文件会被转成大驼峰风格。

└─ pages
   ├─ ...
   └─ a-b           // 连字符
      ├─ AB.vue     // 大驼峰
      └─ index.js

options包含: --wx -w 是否是小程序 --ssr -s 是否支持同构渲染

• web端

# 添加简单页面 page
$ tua add page <name>
# OR
$ tua a page <name>

# 添加支持同构的页面 page
$ tua add page <name> --ssr
# OR
$ tua a page <name> -s

• 小程序端

# 添加小程序端 page
$ tua add page <name> --wx
# OR
$ tua a page <name> -w

在小程序端，该命令会自动读取 src/app/app.json 中的 pages 字段，并将新页面加入。

添加组件命令 add comp

由于组件一般分为两种：

• 全局组件（位于 src/comps/ 下）
• 页面组件（位于 src/pages/foo-bar/comps/ 下）

所以这个命令有两种用法，添加可选的 -g, --global 参数表示添加全局组件，将添加一个新文件夹 <name> 到 src/comps/ 下，否则会进行交互式询问模板文件夹的路径。

组件建议都使用大驼峰命名风格

options包含: --wx -w 是否是小程序 --ssr -s 是否支持同构渲染 --global -g 是否添加全局组件

• web端

└─ comps
   ├─ ...
   └─ TuaImage.vue   // 大驼峰

• 全局添加简单组件

$ tua add comp <name> --global
# OR
$ tua a comp <name> -g

• 局部添加简单组件

$ tua add comp <name>
# OR
$ tua a comp <name>

• 全局添加支持同构的组件

$ tua add comp <name> --global --ssr
# OR
$ tua a comp <name> -g -s

• 局部添加支持同构的组件

$ tua add comp <name> --ssr
# OR
$ tua a comp <name> -s

• 小程序端

└─ comps
   ├─ ...
   └─ TuaImage          // 大驼峰
      ├─ TuaImage.vue   // 大驼峰
      └─ index.js

• 全局添加小程序端 comp(-g, --global)

$ tua add comp <name> --global --wx
# OR
$ tua a comp <name> -g -w

• 局部添加小程序端 comp

$ tua add comp <name> --wx
# OR
$ tua a comp <name> -w

注意使用 <Tab> 键补全路径，输入不存在的文件夹时会自动创建。

导出模板命令 eject

这个命令将包中的默认模板导出到当前项目的 .templates/ 中。

这样通过修改.templates/ 下的模板文件，即可实现自定义模板功能。

$ tua eject
# OR
$ tua e

生成接口声明命令 declare

这个命令将读取导出的 apis 然后自动生成 index.d.ts。

$ tua declare [apisPath]
# OR
$ tua dc [apisPath]

• apisPath 默认值为 src/apis/index.js
• index.d.ts 将生成在 apisPath 同级目录下

在 index.d.ts 已存在的情况下，默认会提示是否覆盖，每次都要手动确认有点儿不方便。所以添加了一个参数 --yes, -y，表示默认覆盖文件。

$ tua declare --yes [apisPath]
# OR
$ tua dc -y [apisPath]

由于使用 require 读取导出 apis 对象的文件，所以可能会碰到 alias 问题。例如项目中设置了 @ 作为 ./src/ 的别名。虽然 @tua/cli 已内置了一些 alias，但你仍然可以自由配置。

在 .tuarc 中的 alias 选项会透传给 babel-plugin-module-resolver，例如将 foobar 指向 './src/foobar' 可以这么配置：

// .tuarc
module.exports = {
    alias: {
        'foobar': './src/foobar',
    },
}

配置

templateDir

• 类型：String
• 默认值：.templates

自定义模板的路径。

alias

• 类型：Object
• 默认值：请点击这里查看源码

设置路径别名对象。

读取模板的优先级逻辑是：

• 首先尝试使用 .tuarc 中的 templateDir 字段
• 接着尝试读取 .templates/
• 最后读取默认模板