开发者中心

# 移动前端

# 1、创建模块

项目以模块划分。

如：framework-app-demo项目中，在“src->views”下，创建了“component”模块。若属于此模块的功能，则应写在此模块下。

avatar

# 2、路由配置

开发了功能后，前端页面还不能被vue检测到，需要开发者自己将页面的路由配置好。

如：1. 在src->router->module下，创建“component”模块的路由文件。

avatar

路由默认为：模块名 + 页面 名，() => import()进行懒加载

  {
    path: '/component/form',
    meta: { title: '表单' },
    component: () => import('@/views/component/form/Index')
  },

路由默认有路由守卫进行权限控制。如果不是登陆状态，去访问菜单，就会跳回登录页；访问后端没传回的菜单时，会跳405没有权限页。

如果不是登录状态访问菜单，需要在路由里面加isLogin: false, 如下

 {
    path: '/component/form',
    meta: { title: '表单', isLogin: false },
    component: () => import('@/views/component/form/Index')
  },

如果要访问没有在管理后台创建的菜单，需要在路由里面加isMenu: false, 如下

 {
    path: '/component/form',
    meta: { title: '表单' , isMenu: false },
    component: () => import('@/views/component/form/Index')
  },

2.将“component”模块的路由放在入口index.js中。

avatar

# 3、后端接口配置

如果我们在页面上写死请求后端的API，很容易会出现耦合，而且不方便维护。我们应当将后端API统一配置，每个模块的API都放到一个文件中，这样就能有效统一管理了。

avatar

在page.js文件中，首行引入环境配置文件中的“后端访问地址”。如下图，引入VUE_APP_PORT_DEMO，每一个API都引用。如果后端API来源不同访问地址，应配置多个。

avatar

# 4、前端组件

中台封装了一些前端组件和方法，供开发者使用：

还提供了demo实例

← 部署教程 →