# 指令：创建一个页面

我们以会员中心为例新开页面  

## 第一步：创建界面文件夹
在界面层的目录 `src/pages/某分类名/` 下新建页面文件夹 `userCenter`
```
src/pages/user/userCenter
```

## 第二步：创建界面配置文件
在刚刚新建的文件夹下新建配置文件 `userCenter.config.js`  

内容为：
```js
export default {
    navigationBarTitleText: '会员中心',
}
```

## 第三步：创建空白界面
继续在刚刚新建的文件夹下新建界面文件 `userCenter.vue`

内容参考文件 `src/components/_cursor.ai/rules/type-surface.mdc` 中的空白模版

### 样式

同时创建样式文件 `userCenter.scss`
```css
/**
 * userCenter
 * @author 作者
 */

@import "../../../components/common/sassMixin";

.user-center {}
```

## 第四步：创建数据控制器
在业务数据控制层的目录 `src/pilots/某分类名/` 下创建数据控制器 `PUserCenter.js`

内容参考文件：`src/components/_cursor.ai/rules/type-pilot.mdc` 中的空白模版


## 第五步：添加页面路由
在路由文件 `src/app.config.js` 中，添加会员中心的路由

```js
export default {
    pages: [
        'pages/home/index/index',
        // 添加会员中心
        'pages/user/userCenter/userCenter',
    ],
};
```

## 第六步：添加首页入口
在首页菜单配置文件 `src/fetchers/datas/menu.json` 文件中，在 `menu` 属性的数组中，添加一条数据

```json
{
    "authId": 1,
    "name": "会员中心",
    "url": "/pages/user/userCenter/userCenter",
    "icon": ""
}
```
注意：`authId` 不要重复