ice.js详解

---

快乐的淘系实习生的必经之路！

一、初始目录结构

├── build // 构建产物目录
├── mock // 本地模拟数据
│ ├── index.ts
├── public // 静态资源目录
│ └── favicon.ico // Favicon 图标
├── src // 源码目录
│ ├── components // 自定义业务组件：我理解为放一些可以封装复用的自定义组件
│ ├── pages // 路由页面组件：我理解为更改路由，页面发生切换
| | ├── about.tsx
| | ├── home.tsx
| | └── layout.tsx // 全局布局组件
│ ├── global.css // 全局样式
│ ├── document.tsx // HTML 模板
│ └── app.ts // 应用入口
├── .env // 环境变量配置文件
├── ice.config.mts // 构建配置
├── package.json
└── tsconfig.json // TypeScript 配置文件

二、 入口文件

src/app.ts

export default defineAppConfig(() => ({
  router: {
    type: 'hash',
    // 渲染 home 页面
    initialEntries: ['/home'],
  },
}));

一、路由类型

hash: 路由通过改变URL中#后面的部分来实现页面的切换，这种路由方式不会向服务器发送请求，因此在前端和后端分离的项目中比较常用。

browser: 路由通过改变URL来实现页面的切换，这种路由方式会向服务器发送请求获取对应的HTML页面，并在前端将其渲染。这种路由方式在传统的后端渲染项目中比较常用。

memory: 路由通过在前端定义一些路由规则，根据规则来实现页面的切换，这种路由方式不会改变URL，并且不会向服务器发送请求，页面切换时只是在前端进行渲染，因此速度比browser快，但不支持URL分享和刷新等功能。这种路由方式常用于一些简单的前端项目中。

二、运行时扩展

export const authConfig = defineAuthConfig(() => {
  return {
    initialAuth: {
      admin: true,
    },
  };
});

export default defineAppConfig(() => ({
  app: {
    strict: true,
  },
}));

一些属性举例：

initialAuth: 用于初始化用户的身份认证信息，包含以下几个属性：
roleList: 角色列表，是一个数组，包含系统中所有可能的角色。
permissionList: 权限列表，也是一个数组，包含系统中所有可能的权限。
role: 当前用户所属的角色。
admin: 当前用户是否为管理员，是一个布尔值。
user: 当前用户是否为普通用户，是一个布尔值。
leader_user: 当前用户是否为团队负责人，是一个布尔值。
这些属性都是用户的身份信息，用于判断用户的角色和权限等。
NoAuthFallback: 当用户没有权限访问某个页面时，跳转的页面。这里指定的是一个组件，用于提示用户无权限访问该页面。

小程序端路由规则：

对于小程序来说，使用约定式路由会带来无法确定首页的问题（在原生小程序中，app.json 中 pages 数组的第一项即被指定为首页）。因此 ice.js 开发小程序时，用户需要在 src/app.tsx 中通过导出 miniappManifest 进行路由的指定，示例如下：

export const miniappManifest = {
  routes: [
    'index',
    'about',
    'repo/index',
    'repo/preview',
  ],
};

注意，routes 中的每一项应该与文件在 pages 目录下的实际路径保持一致，且其第一项将作为小程序的首页被加载。

三、路由跳转：

1. history
2. useNavigate
3. Link 组件