WebApp【公共组件库】@前端(For Git Submodule)
edit | blame | history | raw

指令:创建一个页面

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

第一步:创建界面文件夹

在界面层的目录 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 中,添加会员中心的路由

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

第六步:添加首页入口

在首页菜单配置文件 src/fetchers/datas/menu.json 文件中,在 menu 属性的数组中,添加一条数据

{
    "authId": 1,
    "name": "会员中心",
    "url": "/pages/user/userCenter/userCenter",
    "icon": ""
}

注意:authId 不要重复