Ice项目结构理解
上一篇文章对阿里前端框架Ice的项目创建过程进行了详述（具体见：阿里ICE前端工程创建过程），下面对Ice创建的项目结构进行理解和说明。在Ice官方文档中有对项目中所具有的所有目录结构进行的说明，如下：
├── .ice/ # 运行时生成的临时目录
├── build/ # 构建产物目录
├── mock/ # 本地模拟数据
│ ├── index.[j,t]s
├── public/
│ ├── index.html # 应用入口 HTML
│ └── favicon.png # Favicon
├── src/ # 源码
│ ├── components/ # 自定义业务组件
│ │ └── Guide/
│ │ ├── index.[j,t]sx
│ │ ├── index.module.scss
│ │ └── __tests__ # [可选] 就近测试用例
│ ├── layouts/ # 布局组件
│ │ └── BasicLayout/
│ │ ├── menuConfig.[j,t]s # 布局对应的菜单配置
│ │ ├── index.[j,t]sx
│ │ └── index.module.scss
│ ├── pages/ # 页面
│ │ └── Home/ # home 页面，约定路由转成小写
│ │ ├── components/ # 页面级自定义业务组件
│ │ ├── model.[j,t]sx # 页面级数据状态
│ │ ├── index.[j,t]sx # 页面入口
│ │ └── index.module.scss # 页面样式文件
│ ├── configs/ # [可选] 配置文件
│ │ └── menu.[j,t]s # [可选] 菜单配置
│ ├── models/ # [可选] 应用级数据状态
│ │ └── user.[j,t]s
│ ├── locales/ # [可选] 国际化资源
│ │ ├── en-US
│ │ └── zh-CN
│ ├── utils/ # [可选] 工具库
│ ├── global.scss # 全局样式
│ ├── routes.[j,t]s # 路由配置
│ └── app.[j,t]s[x] # 应用入口脚本
├── build.json # 工程配置
├── README.md
├── package.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.[j,t]s
├── .gitignore
├── .stylelintignore
├── .stylelintrc.[j,t]s
├── .prettierrc.[j,t]s
├── .gitignore
└── [j,t]sconfig.json具体参考：https://ice.work/docs/guide/basic/structure
如果是自己创建的项目，上面有些目录结构暂时是不存在的，需要时可以进行创建并使用。下面是自己创建的Ice项目目录结构，相应的目录的作用也进行了标注：
.
├── README.md
├── build.json # 工程配置
├── my-ice-start.iml
├── package.json
├── public # 项目公共资源
│ ├── favicon.png # 页面标签图表
│ └── index.html # 项目入口HTML（定义了React的root元素）
├── src # 源文件目录
│ ├── app.tsx
│ ├── components # 组件所在目录
│ │ ├── NotFound # 默认创建的组件
│ │ ├── PageLoading # 默认创建的组件
│ │ ├── StartApp # 自定义创建的组件
│ │ ├── StartForm # 同上
│ │ ├── StartTable # 同上
│ │ ├── TicBoard # 同上
│ │ ├── TicGame # 同上
│ │ └── TicSquare # 同上
│ ├── global.scss # 全局样式文件
│ ├── layouts # 项目布局组件
│ │ └── BasicLayout # 默认创建的布局组件
│ ├── pages # 页面所在目录
│ │ ├── About # 默认创建的页面
│ │ ├── Home # 默认创建的页面
│ │ └── ReactStart # 自定义创建的页面
│ └── routes.ts # 项目路由配置
└── tsconfig.json
使用Ice搭建React多页面学习和开发环境
由于最近在学习React的相关知识，而Ice本身就是支持React，因此希望借助上述创建的项目进行React的学习和开发过程。而我希望的是在一个项目中，具有多个页面，每个页面可以根据自己的需求开始一部分React相关知识的学习，而且页面之间彼此互不影响。而Ice可以很好的满足我这种学习环境的需求。下面就使用上述创建的Ice项目，进行如下操作，从而在该项目中实现一个参考教程中的Reac学习项目，并加深对Ice项目使用的理解：
- 创建ReactStart页面（实际上也是React组件）
- 添加Ice项目的菜单（menu）
- 添加ReactStart页面响应的请求路由
- 创建自定义组件
- 完成项目创建并测试
创建ReactStart页面
根据上述项目目录结构的说明，在/src/pages目录下创建需要的页面，此时这里的页面也是React的component。Ice中的组件需要一个目录，然后其中创建index.jsx文件作为该组件的定义。这里创建的页面为：
src/pages/ReactStart/index.jsx该文件的内容如下：
import React from 'react';
import { Link } from 'ice';
import StartApp from '@/components/StartApp';
/**
* react-tutorial项目内容，在该项目中使用该页面显示
*
* @author yitian
*/
const ReactStart = () => {
return (
<div>
<h1>React Get Start with Blog</h1>
<p>https://www.taniarascia.com/getting-started-with-react/</p>
{/*引用的组件，后续进行定义*/}
{/*<StartApp />*/}
</div>
);
};
export default ReactStart;在menu中添加页面的请求路径
创建完成自己的页面之后，先在默认项目的菜单中加入该页面对应的请求。Ice在默认项目中具有的菜单文件为：src/layouts/BasicLayout/menuConfig.ts。在该文件中加入如下的内容：
{
name: 'ReactStart', // react get start with blog
path: '/react-get-start',
icon: 'chart-pie',
},这里定义了菜单的名称叫做：ReactStart， 菜单的请求URL为/react-get-start。这样就完成了菜单的配置。
在routes.ts中添加路由配置
上述过程创建了相应的页面，也定义了菜单，下面需要将菜单中的请求URL和相应的页面进行关联。此时需要使用到的文件就是Ice项目中的路由配置文件：src/routes.ts。在该文件中加入如下的路由配置：
import Home from '@/pages/Home';
import About from '@/pages/About';
import ReactStart from '@/pages/ReactStart';
import TicGame from '@/components/TicGame';
/**
* 项目路由配置
*/
const routes = [
{
path: '/react-get-start', // 该部分为添加的路由配置
component: ReactStart,
},
{
path: '/about', // 路由URL
component: About, // 响应组件About
},
{
path: '/', // 如果使用/，则需要放在最后面
component: Home,
}
];
export default routes;对于Ice项目中的路由配置，Ice官方文档中有详细的说明：https://ice.work/docs/guide/basic/router。这里需要注意的是，由于在路由配置中使用了/来响应Home页面，而Ice的路由查找为根据文件从上到下依次查找，并返回第一个相匹配的path。因此对于/的路由配置需要放在该文件中的最后一个，如果放到第一个的话，则所有请求的响应都会是Home页面了。
完成以上的内容之后，就可以启动项目来测试新建的页面了，项目启动命令如下：
npm start项目启动后会打开localhost:3333页面，点击左侧菜单中的ReactStart就可以打开刚才创建的ReactStart页面了，如下：
但该页面中引入的StartApp组件还没有创建，因此其中显示的只有该页面中定义的一些文字内容。
创建自定义组件
有了上述的StartReact页面，下面就可以使用该页面来进行完整的React学习项目的开发工作。在Ice项目中组件需要创建在：src/components目录下，组件的定义和上述StartReact页面相似。都是需要创建一个目录和其中的index.jsx文件，并且可以引入相应的css等依赖。
例如创StartReact页面中引入的StartApp组件时，需要创建如下的目录和文件：
src/components/StartApp/index.jsx
src/components/StartApp/index.css其中index.jsx文件中的内容如下：
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import StartTable from '../StartTable';
import './index.css';
import StartForm from "../StartForm";
class StartApp extends Component {
// 定义state
state = {
characters: [],
};
// 根据index删除更新state中的内容
removeCharacter = index => {
const {characters} = this.state;
this.setState({
characters: characters.filter((character, i) => {
return i !== index;
})
})
};
// 提交时间处理
handleSubmit = character => {
this.setState({
characters: [...this.state.characters, character]
})
};
render() {
const {characters} = this.state;
return (
<div className="App">
{/*使用props处理表格数据显示*/}
<StartTable
characterData={characters}
removeCharacter={this.removeCharacter}
/>
{/*使用state更新表格数据*/}
<h3>Add new character: </h3>
<StartForm handleSubmit={this.handleSubmit}/>
</div>
)
}
}
export default StartApp;
由于Ice项目中会自动将export的组件加入到React根元素中，因此在组件中仅需要在最后export出来就可以。
这里具体的项目开发情况不在进行详述，具体可以参考Git：https://github.com/Yitian-Zhang/my-ice-start。
完成项目创建并测试
根据上述git项目中的代码，完成项目的整体编写之后。即可以在刚才进入的StartReact页面中看到创建的React学习项目的内容，该页面完成后如下：
总结
通过上述个过程即在Ice默认创建的项目中加入了自定义的页面和组件，并完成了菜单的添加以及路由的设置。此时就可以在新创建的页面中完成React学习项目的开发工作。同样的，在学习React的过程中，对不同部分的学习内容可以通过上述的过程在新增的页面中完成一个独立的学习项目。此时就可以将很多个React的学习小项目整合到Ice项目中，便于后续的回顾和深入。
