@tua-mp/cli

介绍

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

安装

$ npm i -g @tua-mp/cli
# OR
$ yarn global add @tua-mp/cli

使用

初始化项目 init

这个命令代理了 vue-cli v2，所以用法也一样...

$ tuamp init <template-name> <project-name>

添加接口命令 add api

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

# 添加小程序端 api
$ tuamp add api <name>
# OR
$ tuamp a api <name>

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

添加页面命令 add page

这个命令将添加一个新文件夹 <name> 到 src/pages/ 下，并且自动添加 pages/<name>/<name> 到 src/app/app.json 中。

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

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

# 添加小程序端 page
$ tuamp add page <name>
# OR
$ tuamp a page <name>

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

添加组件命令 add comp

由于组件一般分为两种：

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

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

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

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

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

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

• 局部添加小程序端 comp

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

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

导出模板命令 eject

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

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

$ tuamp eject
# OR
$ tuamp e

生成接口声明命令 declare

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

$ tuamp declare [apisPath]
# OR
$ tuamp d [apisPath]

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

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

$ tuamp declare --yes [apisPath]
# OR
$ tuamp d -y [apisPath]

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

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

// tua.config.js
module.exports = {
    alias: {
        'foobar': './src/foobar',
    },
}

配置

配置文件和 @tua-mp/service 一样，都是使用 tua.config.js。

templateDir

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

自定义模板的路径。

alias

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

设置路径别名对象。

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

1. 首先尝试使用 tua.config.js 中的 templateDir 字段
2. 接着尝试读取 .templates/
3. 最后读取默认模板