tarojs-plugin-generator

Taro 页面/组件创建工具，全部使用函数式组件+typescropt+hooks，提供良好的页面提示。

安装

在 Taro 项目根目录下安装

$ npm i tarojs-plugin-generator --save

使用

引入插件

请确保 Taro CLI 已升级至 Taro3 的最新版本。

修改项目 config/index.js 中的 plugins 配置为如下

const config = {
  ...
  plugins: [
    ...其余插件

    'tarojs-plugin-generator'
  ]
  ...
}

//可配置css编译器： 支持 
// 'none':
// 'sass':
// 'less':
// 'stylus':
const config = {
  ...
  plugins: [
    ...其余插件

    ['tarojs-plugin-generator',{
      css:'sass',  //可配置css编译器： 支持 none sass less stylus
      cssModules:'page',      //开启页面的CssModule化
    }]
  ]
  ...
}

插件配置

generator插件支持以下参数

| 参数项 | 类型 | 是否可选 | 用途 | 默认值 | | :-----| :---- | :---- | :---- |:---- | | css | string | 是 | 指定css类型，可选择 none,sass,less,stylus | none| | cssModules | string | 是 | 可选项'page','component','page,component',none | none |

cssModules参数说明

| 参数项 | 用途 | | :-----| :---- | | 'page'| 开启页面cssModule（包括页面组件也会自动module化），文件名为 page.module.css | | 'component'| 开启组件cssModule，文件命名为 component.module.css | | 'page,component'| 同时开启上述功能 | | 'none'| 不打开cssModule功能 |

这样可通过 taro gen 参数 来自动化创建页面

命令行参数

generator插件支持以下参数

| 参数项 | 类型 | 是否可选 | 用途 | | :-----| :---- | :---- | :---- | | --component | string | 是 | 创建一个组件/页面级组件 | | --page | string | 是 | 创建一个页面 |

使用案例

1.创建项目组件

 taro gen --component Button

生成结果：

-- 组件:      components/Button/index.tsx
-- 组件样式:  components/Button/index.less

2.创建页面组件

 taro gen --component index/Button  // index为页面文件夹名称，自动查询为 pages/index

生成结果：

-- 组件:      pages/index/components/Button/index.tsx
-- 组件样式:  pages/index/components/Button/index.less

3.创建页面(简化版)

 taro gen --page mime 

生成结果：

-- 页面:          pages/mime/mime.tsx
-- 页面配置:       pages/mime/mime.config.tsx
-- 页面样式:      pages/mime/mime.less

4.创建页面(指定具体页面名称)

 taro gen --page index/search 

生成结果：

-- 页面:          pages/index/search.tsx
-- 页面配置:       pages/index/search.config.tsx
-- 页面样式:      pages/index/search.less