HY2 Documentation 起步

如果你仅仅是想构建 Yo 的项目，构建方法请看这里！

Hy2.0 的项目会多增加一些 qunar 和 hy 相关的配置。

Hy2 提供了一些非常便捷的开始方式，你可以通过阅读下面的内容根据自己的特定需要来选择：

环境与构建
全新的开发方式
开始开发
项目目录结构
更新升级

环境与构建 #

基础环境 #

请确保你已经安装过下述环境：

Node.js
npm

我们推荐使用 >=3.0.0 版本的 npm 进行开发。如果 npm 的版本过低，可能会导致一些问题，具体说明和解决方案请查看这里。

使用 `ykit` 构建（推荐）

Hy2 提供了基于 ykit 的构建工具，只需简单几步，你就可以构建出一个基于 Hy2 的项目。

安装 ykit：(sudo) npm install ykit -g
初始化一个项目：在项目根目录下（没有则新建）执行 ykit init yo --hy2，将会自动完成 Hy2 的安装，同时为你构建出 Hy2标准工程目录

如果需要在已有项目中使用，详情请参考这里。

全新的开发方式 #

Hy2 在开发方式上相比之前有了比较大的改进。

基于React：Hy2 完全抛弃了传统的 fekit 时代的开发模式，全面拥抱 ES6 语法和 React ，在使用 Hy2 开发之前，你应该首先熟悉一下 React。
样式革新：Hy2 不再推荐使用传统的 css 和 js 分离的方式, 而是推荐直接在 .js文件里引入 .scss文件，构建工具会自动帮你在 js 文件的目录中生成同名的 css 文件。

例如：page/demo/index.js
```
  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.scss'; // 引入这个页面的scss
```
使用chunk模式：Hy2 默认使用了 webpack 的 chunk 模式，即不管是单页还是多页模式，js 资源都是按需加载的。详情
使用DLL：Hy2 为了提升开发体验、有效利用浏览器缓存，将项目中的公共模块提取并生成公共文件 lib.js，用户只需要在页面中多添加一个引用即可。详情

开始开发 #

启动ykit：在项目上一级目录执行 (sudo) ykit server
添加资源引用：

首先，在项目根目录找到 ykit.yo.js 文件（该文件是在项目初始化时自动创建的），并通过 export 参数配置 js 文件的入口。
```
  export: ['./page/demo/index.js'],
```
由于构建工具会帮你在 js 文件所在目录生成一个同名 css 文件，所以在配置入口时只需添加 js，不需要添加 css。

然后，在页面中引用 js 和 css 资源。
```
  <link rel="stylesheet" href="[项目路径]/prd/page/home/index.css" />
  ...
  <script src="[项目路径]/prd/lib.js"></script>
  <script src="[项目路径]/prd/page/home/index.js"></script>
```
- 由于使用了 DLL，所以页面中需要多引入一个 lib.js。
- 在更新了 node_modules 或是修改了 DLL 相关的配置之后，你可能需要执行 ykit dll 并重启 ykit 服务。查看详情
访问页面：这个时候你的页面已经可以正常访问了

当然，你也可以访问项目初始化时，创建的示例页面（默认地址是：http://127.0.0.1/项目名/src/html/index.html）

Hy2 是基于 Yo、Yo-router 和 HySDK 进行开发的，更加详细的使用说明请参照文档：

项目目录结构 #

在构建完成之后会生成下面的目录结构：

|- node_modules
|- src --------------------------// 项目源码
|  |- common --------------------// 公共配置、工具等
|  |- component -----------------// 公共组件
|  |   |- componentA
|  |   |    |- index.js ---------// 组件代码
|  |   |    |- style.scss -------// 组件样式
|  |   |- componentB
|  |   |- ...
|  |- page ----------------------// 业务逻辑目录（页面维度）
|  |   |- pageA //页面目录
|  |   |    |- index.js ---------// 页面入口文件
|  |   |    |- index.scss -------// 页面样式
|  |   |    |- component --------// 页面内部使用的组件
|  |   |- pageB
|  |   |- ...
|  |- html ----------------------// 页面html
|  |- yo-config -----------------// 样式配置文件夹
|- ...
|- package.json // npm配置文件
|- ykit.yo.js // ykit配置文件

更新升级 #

相比于之前的升级方式，现在的 Hy2 升级也更加简便，只需要在项目目录执行 npm install 模块名 即可。

起步

如果你仅仅是想构建 Yo 的项目，构建方法请看 这里！