_start.md

开始使用

安装

ttk以命令行工具的形式工作，使用npm全局安装：

npm i ttk-tool -g

国内网络环境下访问npm仓库比较缓慢，可以将npm仓库地址修改为国内淘宝镜像：

npm config set registry https://registry.npm.taobao.org

安装成功后，你可以使用ttk脚手架创建一个新的ttk项目，或者按照构建配置文档将已存项目改造为ttk项目。

脚手架

使用下述命令创建一个新的ttk项目：

ttk new <webapp>

执行npm start
打开浏览器：输入http://localhost:8082 如果出现如下图示样，说明项目创建成功。

• --template选项指定项目模板，简写为-t。如果不指定项目模板，ttk将使用默认模板,后期会扩展更多模板(https://github.com/thethreekingdoms/ttk-generator-app)；
• <newapp>指定创建项目的文件夹名称，可以有以下取值：
  • ./或者.或者为空，将当前目录指定为项目目录；
  • 任何合法的文件夹名称，比如"newapp",将在当面目录下创建新的文件夹作为项目目录。

ttk的脚手架功能是基于yeoman构建的，理论上可以安装任何yeoman的脚手架方案。你可以根据yeoman的规范自定义ttk脚手架模板，详细的开发规范请查阅自定义脚手架。

执行成功后一个单页项目的初始目录如下图所示：

根目录下的ttk-conf.js是ttk的配置文件，脚手架已经为你创建了基础的配置项，你可以参照配置文档进行更细化的配置。

• webapp取值为空或.或./时将会在当前目录创建项目；如果webapp为合法的目录名称，将会在当前目录创建以webapp命名的新文件夹并在新文件夹内创建项目文件;
• template为项目脚手架模板，如果不指定（即执行ttk new <dirname>）则使用ttk默认模板generator-ttkapp。

更多的脚手架使用细节请参照脚手架文档。

构建

在项目根目录下执行：

ttk compile <env>

• <env>指定构建项目的环境。如果不指定则默认在testing环境下编译。ttk内置支持以下环境：
  • dev- 开发环境；
  • testing- 测试环境；
  • prod- 生产环境；

�你可以使用envs()扩展更多环境支持，具体细节请参考多环境支持

• -i/--init(可选)选项的作用是指明是否让ttk自动检查依赖(包括ttk自身的插件、配置以及项目的dependencies)并自动安装。以下情况必须指定此选项：
  • 项目初始化后第一次运行build或serve（取其一）；
  • 修改ttk-conf.js中以下选项后：
    • style-ext类型/开启autoprefix/开启sprites;
    • html-engine类型;

由于检查依赖需要花费大量时间，所以除以上情况以外，尽量避免使用init选项。

关于ttk环境配置的细节请参阅多环境支持。

编译成功后，默认输出目录为dest。

关于构建的详细功能配置请参阅构建。

本地服务器

ttk提供一个本地服务容器，方便前端工程师独立开发。在项目根目录下运行serve命令：

ttk serve [-i]

-i/--init(可选)选项作用同编译功能。

• 本地服务器默认监听8888端口；
• 如果项目中只存在一个index.html文件，直接访问localhost:8888即可；
• 如果项目中存在多个index.*.html文件:
  • 直接访问localhost:8888默认返回index.html；
  • 如果要访问其他入口，地址格式为localhost:8888/index.*.html或者完整路径localhost:8888/<views dir>/index.*.html(views路径和html文件名可自行配置)；
  • 如果开启了html-removePrefixAfterBuilt，则可以省略每个html文件的“index”前缀。比如源码存在index.home.html和index.about.html则可以直接访问localhost:8888/home.html和localhost:8888/about.html

HMR与Livereload

本地开发服务器开启期间，对于JavaScript和CSS源文件的修改无需刷新浏览器即可由HMR即时更新至客户端，而HTML源文件的修改会触发Livereload。

开发过程中已存文件的内容修改无需重启本地服务器，但如果增加新文件或者已存文件重命名，则必须重启本地服务器才可看到效果。

本地服务器详细功能配置请参阅本地服务器。

Mock服务

ttk的Mock服务有两种运行模式：独立运行和Dev server集成。两种模式的配置项完全一致，如下：

ttk.mock('Get /userinfo').params(['name']).custom({
  jsonpCallback: 'cb'
}).response({
  success: {
    code: 200,
    msg: '请求成功'
  },
  fail: {
    code: 500,
    msg: '请求失败'
  }
});

ttk.mock('Post /signup').proxy('https://passport.ttkteam.com/signup');

上述代码定义了两个Mock接口：

• 支持Get请求的/userinfo接口。必选参数name，支持jsonp并且jsonpCallback识别为cb(默认为callback)，返回数据自定义数据；
• 代理接口/signup。将本地接口/signup的Post请求代理到'https://passport.ttkteam.com/signup'接口。

独立运行

在项目根目录下运行：

ttk mock -p 9999

• -p指定监听端口号，默认为8889。

然后运行本地开发服务器时增加-s选型：

ttk server -s

• -s代表运行dev server不会集成mock服务。

之所以支持独立Mock服务是为了多项目共用同一Mock接口的场景，增强Mock的复用性。

Dev server集成

不添加-s选项运行dev server即可集成Mock服务：

ttk serve

关于Mock的详细配置请参阅Mock。

部署

编译完成之后，执行以下命令将生成的代码部署到远程服务器：

ttk deploy -e <env>

• env可选**dev以外**的任意有效环境变量，包括ttk内置的testing/prod以及通过envs()API定义的环境变量；
• 部署功能使用sftp作为传输协议，所以需要接收文件的服务器提供相应权限。

部署的详细功能配置可参阅远程部署。

浏览器支持

✔	✔	10+ ✔	✔	✔	✔