create-teamix

0.0.53 • Public • Published

create-teamix

create-teamix 是 Teamix 前端工程配套的命令行工具,提供了新建应用、添加页面等功能。相比于直接使用 create-teamix,我们更推荐你使用封装了它的 Teamix VSCode 插件

创建 teamix 应用

tnpx 方式

$ tnpx create-teamix <project-directory>

如果之前已通过 npm install -g create-teamix 全局安装了 create-teamix,建议您使用 npm uninstall -g create-teamix 卸载软件包,以确保 npx 始终使用最新版本。 (npx 是一个包运行工具,从 npm v5.2 开始,增加了 npx 命令。

tnpm 方式

tnpm init <initializer> 需要 tnpm 6+ 版本才能使用。

$ tnpm init teamix <project-directory>

或者

$ tnpm create teamix <project-directory>

或者

$ create-teamix <project-directory>

使用

参数说明

  -V, --version                         output the version number
  --type <template-name>                指定样板工程类型,可选值: spa|uiless|micro|mpa|ssr|h5|ascm|aso
  --language <typescript | javascript>  指定语言
  --install                             是否自动安装依赖,默认自动安装
  --start                               是否自动启动服务,默认不启动服务
  --branch                              指定样板工程代码库的分支
  --theme                               主题,包括颜色和明暗,可选值:teambition|teambition-dark|apsara|apsara-dark
  --dm                                  默认显示明暗哪种主题,默认明色,可选值:bright|dark
  --nav                                 导航类型,可选值:default|apsara|infra|teambition
  --sidebar                             是否显示左侧栏,默认显示
  --visualization                       是否包含可视化图表,默认不包含
  --repository                          代码仓库地址,可不填
  -h, --help                            output usage information

--type

样板工程类型。可选值有:

  • spa - SPA 单页面应用
  • uiless - 微前端 UILess 组件.
  • micro - 微前端宿主应用.
  • mpa - 多页面应用.
  • ssr - 服务端渲染应用.
  • h5 - 移动应用.

--language

语言类型。可选值有:

  • typescript
  • javascript

--install

是否自动安装依赖。可选值有:

  • true[default]
  • false

--start

是否自动启动服务。可选值有:

  • true
  • false[default]

--theme

主题,包括颜色和明暗。可选值有:

  • teambition Teambition 产品的默认主题。
  • teambition-dark Teambition 产品的暗色主题(并无实用场景)。
  • apsara 专有云控制台的明色主题。
  • apsara-dark 专有云控制台的暗色主题。

--dm

默认显示「明」「暗」哪种主题,默认明色,可选值:

  • bright 明色
  • dark 暗色

--nav

吊顶导航

  • default 默认导航为空
  • apsara 专有云导航
  • infra 天基导航
  • teambition Teambition 导航

--sidebar

是否显示左侧栏,默认显示。可选值有:

  • true[default]
  • false

--visualization

是否包含可视化图表,默认不包含。图表库资源如下 亮色主题:index(默认) 暗色主题:dark 专有云主题:aliyun 专有云暗色主题:aliyun-dark

  • true
  • false[default]

--repository

代码仓库地址,可不填

示例

$ tnpx create-teamix myspa
 
 选择样板工程类型: (Use arrow keys)
❯ SPA - 单页面应用
  Micro frontends - 微前端 UILess 组件
  Micro frontends - 微前端宿主应用
  Visualization - 可视化应用
  MPA - 多页面应用
  SSR - 服务端渲染工程
  Apsara - 专有云前端应用
 
? 选择语言类型? (Use arrow keys)
❯ TypeScript
  JavaScript
 
🍵 正在创建 SPA 单页面应用到 {目标目录}
 
🍵 开始安装依赖
🦄 依赖安装完成
 
🎉 成功初始化工程!
 
接下来你可以:
   进入工程目录
     $ cd teamix1
 
   去 Gitlab 新建项目,并上传到git
     $ git remote add origin git@xxx.git
     $ git add .
     $ git commit
     $ git push -u origin master
 
   开发调试
     $ tnpm start
 
   打包构建
     $ tnpm run build
 
   发布日常
     $ def p -d
 
   发布线上
     $ def p -o
 

或者

$ tnpx create-teamix myspa --type spa --language typescript

创建业务工程

专有云 SPA 应用【JS】

只有专有云才会出现没有侧边栏的情况,并且专有云应用一般自带可视化图表

$ tnpx create-teamix apsara-spa --language javascript --type spa --theme apsara --nav apsara --sidebar false --visualization

暗色

$ tnpx create-teamix apsara-spa --language javascript --type spa --theme apsara --dm dark --nav apsara --sidebar false --visualization

天基 SPA 应用【JS】

$ tnpx create-teamix infra-spa --language javascript --type spa --theme infra --nav infra --sidebar

暗色

$ tnpx create-teamix infra-spa --language javascript --type spa --theme infra --dm dark --nav infra --sidebar

天基 MPA 应用,内置特殊组件库 AISC

$ tnpx create-teamix infra-mpa --language javascript --type mpa --theme infra --nav infra --sidebar --component aisc --visualization

Teambition SPA 应用【JS】

$ tnpx create-teamix teambition-spa --language javascript --type spa --theme teambition --nav teambition

过程

  • 检查安装环境 Node > 9.0.0
  • 检查路径为空或空文件夹,用户确认是否覆盖
  • 选择样板工程类型,执行各工程初始化(包括选择语言类型)
  • 初始化工程完成
  • 自动「安装依赖」
  • 根据参数 start 判断是否默认自动「启动服务」

添加 teamix 模板页面

tnpx

$ tnpx create-teamix add <srcPagesName> --template <templateProject> --target <targetPath> --route <routePath> --title <PageTitle> --pageName <pageName>

示例

$ tnpx create-teamix add indexList --target src/pages
$ tnpx create-teamix add form1 --target src/pages --route /form-bo --title 产品名bo --pageName form-bo

添加可视化页面模板示例,先创建一个天基 SPA

$ tnpx create-teamix infra-spa --language javascript --type spa --theme infra --dm dark --nav infra --sidebar
$ tnpx create-teamix add dashboard --target src/pages --route /dashboard --title testDashboard --pageName testDashboard --template @alife/at-design-pro-for-visualization

使用

参数说明


<srcPagesName> 默认模板工程 @txdfe/at-design-pro/src/pages 下的文件名/路径
--template 模板工程,目前支持的模板工程,默认值:@alife/at-design-pro,可选值:@alife/at-design-pro-for-visualization
--target 指定添加页面到目标路径下,默认是执行命令行的所在路径下的 src/pages 目录
--route 指定路由,默认和 <srcPagesName> 的路由约定一致,具体值可在 @txdfe/at-design-pro/src/route/route.js 中查看
--title 标签页标题,默认和 <srcPagesName> 的标题一致,具体值可在 @txdfe/at-design-pro/src/route/route.js 中查看
--pageName 用户工程中 src/pages 下的文件名

删除 teamix 模板页面

tnpx

$ tnpx create-teamix delete <routeName> --rootPath <rootPath>

或者

$ tnpx create-teamix del <routeName> --rootPath <rootPath>

使用

参数说明

  <routeName>            命令行的所在路径查找 route/routes.json , 并删除对应的路由
  --rootPath             指定工程根目录,非必填,默认为当前目录

修改 teamix 模板页面

tnpx

$ tnpx create-teamix update <routeName> --route <newRouteName> --title <newTitle> --rootPath <rootPath>

或者

$ tnpx create-teamix edit <routeName> --route <newRouteName> --title <newTitle> --rootPath <rootPath>

使用

参数说明

  <routeName>            命令行的所在路径查找 route/routes.json , 并修改对应的路由
  --route                新路由
  --title                新标签页标题
  --rootPath             指定工程根目录,非必填,默认为当前目录

初始化模板工程的 meta 信息

执行命令后会更新 pro 目录下对应模板工程的页面 meta 信息。注意:更新 meta 信息前,需要重新安装模板工程。

tnpx

$ npm uninstall -S @alife/at-design-pro
$ npm i -S @alife/at-design-pro
$ tnpx create-teamix meta <templateProject>

使用

参数说明

  <templateProject>      模板工程,默认值:@alife/at-design-pro

示例用法

$ npm uninstall -S @alife/at-design-pro-for-visualization
$ npm i -S @alife/at-design-pro-for-visualization
$ tnpx create-teamix meta @alife/at-design-pro-for-visualization

初始化 Site Map 结构包

tnpx

$ tnpx create-teamix sitemap <projectDirectory> --siteMapTemplate <templateProject> --language javascript

使用

参数说明

  <projectDirectory>       工程路径名称
  --siteMapTemplate        指定样板工程类型,可选值: apsara|infra|teambition
  ...                      其他参数同初始化工程参数

示例用法

创建 Teambition Site Map 结构包

$ tnpx create-teamix sitemap teambition-sitemap-demo --siteMapTemplate teambition --language javascript --type spa

创建 天基 Site Map 结构包【暂不可用】

$ tnpx create-teamix sitemap infra-sitemap-demo  --siteMapTemplate infra --language javascript --type spa --theme infra --dm dark --nav infra --sidebar

创建 专有云 Site Map 结构包【暂不可用】

$ tnpx create-teamix sitemap apsara-sitemap-demo  --siteMapTemplate apsara --language javascript --type spa --theme apsara --dm dark --nav apsara --sidebar

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i create-teamix

Weekly Downloads

0

Version

0.0.53

License

MIT

Unpacked Size

115 kB

Total Files

44

Last publish

Collaborators

  • bowei.jbw
  • dingyu.wdy
  • purple-force
  • teamaxy
  • tod.zx