前言
ICE是阿里巴巴开发和开源的一款简单而友好的前端研发体系，具有如下的特性：
- 可视化开发：通过 IDE 简化前端工程复杂度，同时通过适配器可接入不同的项目工程进行可视化管理，定制专属的前端工作台
- 丰富的物料：基于物料拼装提高项目开发效率，同时提供丰富的 React/Vue 物料
- 最佳实践：结合丰富的经验沉淀出的项目开发最佳实践，包括目录结构、开发调试、路由配置、状态管理等
- 自定义物料：通过物料开发者工具快速开发构建私有物料体系
这里为了使用多页面的React并熟悉公司的开发环境，选择使用了ICE项目。下面是ICE项目环境的搭建过程。
ICE官网：https://ice.work/
iceworks可视化IDE项目创建
项目创建
ice提供了两种项目的创建方式，一种是使用iceworks前端项目开发IDE来进行可视化的项目创建，比较简单方便。首先在官方网站（https://ice.work/）下载相应环境下的安装文件。下面以mac环境进行。
1. 选项项目模板，左边的模板是创建微前端项目使用的，这里选择第二个项目模板，创建应用项目。
2. 然后根据提示，填写项目名称和安装的目录。
3. 待上述过程完成后，变可以看到项目创建成功的提示。
4. 点击上述进入工作台，然后就可以打开该工具中自带的IDE开发环境，可以方便的在其中编辑代码。
项目启动
在上述项目创建完成后，可以上述工作台的“终端”使用命令启动项目：
npm start
此时可能会出现如下异常：
ERR! CONFIG Fail to load plugin /Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/build-plugin-fusion/lib/index.js
ERR! CONFIG Error: Missing binding /Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/node-sass/vendor/darwin-x64-72/binding.node
ERR! CONFIG Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 12.x
ERR! CONFIG
ERR! CONFIG Found bindings for the following environments:
ERR! CONFIG - OS X 64-bit with Node.js 12.x
ERR! CONFIG
ERR! CONFIG This usually happens because your environment has changed since running `npm install`.
ERR! CONFIG Run `npm rebuild node-sass` to download the binding for your current environment.
ERR! CONFIG at module.exports (/Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/node-sass/lib/binding.js:15:13)
ERR! CONFIG at Object.<anonymous> (/Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/node-sass/lib/index.js:14:35)
ERR! CONFIG at Module._compile (internal/modules/cjs/loader.js:936:30)
ERR! CONFIG at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
ERR! CONFIG at Module.load (internal/modules/cjs/loader.js:790:32)
ERR! CONFIG at Function.Module._load (internal/modules/cjs/loader.js:703:12)
ERR! CONFIG at Module.require (internal/modules/cjs/loader.js:830:19)
ERR! CONFIG at require (internal/modules/cjs/helpers.js:68:18)
ERR! CONFIG at Object.<anonymous> (/Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/build-plugin-fusion/lib/webpackPlugins/appendStyleWebpackPlugin.js:7:14)
ERR! CONFIG at Module._compile (internal/modules/cjs/loader.js:936:30)
ERR! CONFIG at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
ERR! CONFIG at Module.load (internal/modules/cjs/loader.js:790:32)
ERR! CONFIG at Function.Module._load (internal/modules/cjs/loader.js:703:12)
ERR! CONFIG at Module.require (internal/modules/cjs/loader.js:830:19)
ERR! CONFIG at require (internal/modules/cjs/helpers.js:68:18)
ERR! CONFIG at Object.<anonymous> (/Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/build-plugin-fusion/lib/index.js:5:34)
根据提示运行如下命令即可解决该问题：
npm rebuild node-sass
重新运行npm start命令，项目启动成功：
此外，除了使用命令启动 项目外，也可以在工作台上面，通过启动按钮，来启动项目：
和使用命令时启动项目相同，成功启动项目后会在浏览器中打开相应的页面。
提示：建议第一次使用npm start命令来启动项目，因为在启动异常的时候可以查看详细的日志信息，方便解决问题。
初始化项目仓库
如果需要将所创建的项目提交至git，iceworks也提供了比较方便的使用方式。在工作台左侧选择源代码管理选项，可以看到如下的初始化项目仓库的按钮：
初始化的时候需要选择下面项目所在的目录，其实就是git init命令 ：
然后在下面的框中填写commit的message，对号为commit：
然后在git中创建名为my-ice-start的远程仓库，然后根据仓库创建完成后给出的提示（提示如下）：
将已有的提交试用如下命令进行push：
bash-3.2$ git remote add origin https://github.com/Yitian-Zhang/my-ice-start.git
bash-3.2$ git push -u origin master
这样就将此时创建的项目提交到了远程仓库中：
命令行项目创建
除了上述使用iceworks进行项目的创建，ice还提供了命令行的方式创建项目。
初始化项目
可以选择使用 npm 或者 yarn 工具进行项目初始化，如下输入项目名即可：
$ npm init ice <projectName>
# or
$ yarn create ice <projectName>
选择模板
可以根据实际情况选择 TypeScript 和 JavaScript 模板，其中各包含一个轻量的 Lite 和功能完善的 Pro 模板：
? Please select a template (Use arrow keys)
❯ A lightweight TypeScript template.
A lightweight JavaScript template.
Pro TypeScript template，Integrated rich features such as charts, lists, forms, etc.
Pro JavaScript template，Integrated rich features such as charts, lists, forms, etc
选择模板会自动创建项目，看到如下信息说明项目创建成功：
✔ download npm tarball successfully.
info clean package.json...
Initialize project successfully.
Starts the development server.
cd <projectName>
npm install
npm start
✨ Done
启动项目
按照上面的提示，进入新建的项目安装依赖即可：
$ cd <projectName>
# 安装依赖
$ npm install
# 启动项目
$ npm start
执行上述命令后，会自动打开浏览器窗口访问 http://localhost:3333，这时应该看到默认的页面。
IDEA导入项目进行开发
除了试用上述ice提供的iceworks开发工作台进行项目开发和运行，上述创建的ice项目也可以导入到IDEA中进行开发。下面为相应的导入过程：
这里不用选model：
试用默认的名称就可以：
导入完成后得到如下的界面：
此时如果需要启动该项目，比较简单的方式就是在terminal中运行和上述一样的如下命令：
npm start
即可以启动项目，启动完成后会自动在浏览器中打开相应的页面。然后就可以在IDEA中进行后续的开发工作。