说明

使用前端框架需要通过命令行方式

目录结果描述

|—— bin 脚手架启动文件 | |—— index.js |—— lib | |—— addFeatrue // 向项目添加框架功能 | | |—— featruesOption.js // 添加功能对应的配置项
| | |—— index.js // 主入口 | | |__ install.js // 自动安装功能 | |—— prompts | |—— templates // 框架模板 | | |—— src // 模板资源
| | | |—— i18n // 国际化功能 | | | | |—— locales | | | | | |—— en_US_json // 英语 | | | | | |—— zh_CN.json // 简体中文 | | | | |__ index.js | | | |—— lib // 可添加ui功能库 | | | | |—— cube-ui // cube-ui按需引入 | | | | | |__ index.js | | | | |—— ego-ui // ego-ui源码包 | | | | | |—— packages | | | | | |__ README.md | | | | |__ element-ui // element-ui按需引入 | | | | |__ index.js | | | |—— theme // 自定义主题色 | | | | |__ themeRegister.js | | | |__ main.js.ejs // main模板 | | |—— webpack // 项目webpack模板 | | | |bin | | | | |—— base.config.ejs | | | |—— babel.config.js.ejs | | | |package.json.ejs | | |—— babel.config.js.ejs | | | package.json.ejs | |—— updater // 更新脚手架 | | |—— checkVersion.js | | |—— getVersion.js | | | index.js | |—— utils // 工具类 | | |—— checkVersion.js // 检查nodejs版本
| | |__ suggestCommand.js // 错误建议 | |—— FileRender.js // 渲染模板文件输出框架定制项目 | |—— implement.js // 处理需要安装到项目的功能 | |—— processing.js // 终端交互定制框架项目 | |__ PromptSponsor.js // 终端输出选择功能项 |—— eslintignore |—— eslintrc |—— gitignore |—— package-lock.json |—— package.json |—— README.md |__ yarn.lock

命令行使用方式

taoe-cli是一款基于do1cloud-front-framework为模板开发的前端命令行工具。 首先全局安装 taoe-cli：

npm install -g taoe-cli --registry http://npm.fed.qiweioa.cn

安装完成后，在任意目录下可执行命令：

# Usage: taoe <command> [options]

# 查看版本
taoe -V # taoe --version

# 帮助
taoe -h # taoe --help

# 创建项目
# <app-name> 创建的项目名
# [destination] 创建的目标目录，可选项
# 创建pc端web应用
taoe create <app-name> [destination]
# 创建h5应用
taoe create <app-name> [destination] -m

创建项目

# 在 project 目录下创建 hello-world 项目

# 创建pc端项目
taoe create hello-world project

# 创建h5项目
taoe create hello-world project -m

通过命令行自行选择创建pc端项目或者h5项目，执行以上命令后，终端将会有用户交互：

# 创建web应用 / 创建h5应用

# 拉取代码的帐号
? 请输入gitlab帐号
# 拉取代码的密钥
? 请输入gitlab密码
# 可简单描述项目的相关信息
? 项目描述：my first project
# 可指定项目负责人或者项目开发小组
? 开发者：xxx

以上的交互逐一递进。 完成后将会根据是pc端还是移动端，为开发者提供功能选择：

# pc端功能选项

? 请选择功能： (Press <space> to select, <a> to toggle all, <i> to invert selection)
=== 框架 ===
> () element-ui
  () ego-ui
=== 扩展能力 ===
  () i18n 国际化
  () 主题切换（换肤）

# 移动端功能选项

? 请选择功能： (Press <space> to select, <a> to toggle all, <i> to invert selection)
=== 框架 ===
> () vant
  () cube-ui
=== 扩展能力 ===
  () i18n 国际化
  () 主题切换（换肤）

选择项目中需要使用到的框架能力后即开始初始化项目。

添加框架功能

# 在project目录下为hello-world项目添加功能

# 添加pc端功能
taoe add hello-world

# 添加移动端功能
taoe add hello-world -m

输入以上命终端会展示相应的功能选项，选择对应的功能即可添，确定后自动安装依赖并重启项目

更新脚手架

taoe update

控制台将提示是否有远程版本可供更新，询问是否安装，选择安装，确定后自动下载最新版本

查看版本

taoe -V # taoe --version

控制台将输出该脚手架版本号。

帮助

taoe -h # taoe --help

以上help命令将输出以下信息：

Usage: taoe <command> [options]

Options:
  -V, --version                    output the version number
  -m, --mobile                     create a h5 application
  -h, --help                       display help for command

Commands:
  create <app-name> [destination]  create a application by do1-frame-cli
  help [command]                   display help for command

本地开发

可执行文件

这里说的可执行文件即是 bin/index.js。该文件为脚手架执行入口，通过 node 运行使用。

本地开发时，为方便调试使用，可先通过终端输入：

npm link

执行成功后，即可在任意目录下执行命令：

taoe <command> [options]

通过查看帮助命令（-h / --help）可以查看可用的 <command> 和 [options]，其中尖括号 <> 为必要，而中括号 [] 为可选。

库文件

库文件指代 lib/ 下所有的文件。其中：

• prompts 交互数据，分pc和h5

• templates 功能代码模板，可使用ejs模板

• utils 工具方法

• ...