由于实际往往比较复杂，我们为了开发者快速上手业务开发，我们选取一个比较简单、但是功能又完善、齐全的模块为例进行介绍。

开发一个按钮管理页面

相关的后端接口只需要启动后端服务即可，我们这里只介绍前端页面如何开发，相关的效果图如下：
button_mgr.jpg

第一步：
定义页面需要使用的后端接口api，相关目录位置：src/api/system-setting/button.js,具体内容如下：

  1. // 关于底层封装的 axios 库，请在 src/libs/api_request 目录自行查看已有封装的函数列表
  2. import axios from '@/libs/api_request'
  4. // 查询
  5. export const list = (params) => {
  6.   return axios.get('/button/list', params)
  7. }
  9. // 新增
  10. export const create = (data) => {
  11.   return axios.post('/button/create', data)
  12. }
  14. // 修改
  15. export const edit = (data) => {
  16.   return axios.post('/button/edit', data)
  17. }
  19. // 删除
  20. export const destroy = (id) => {
  21.   return axios.post('/button/destroy', {id: id})
  22. }

以上接口在实际请求时，接口地址前缀，会拼接配置文件中定义的前置：

  1.     baseUrl: {
  2.         // npm run dev 有效
  3.         // 接口请求时，开发环境前缀
  4.         devApiPre: 'http://127.0.0.1:20201/admin',   
  6.         // npm run build 有效
  7.         // 接口请求时，生产环境前缀
  8.         proApiPre: 'http://139.196.101.31:20201/admin',
  9.     },

此外，还会自动携带 token ，最终执行请求。

第二步：
开发一个 button 管理模块相关的页面组件，参考位置：src/components/system-setting/button/index.vue。
具体代码请自行阅读，开发其他模块，也可以直接复制以下2个文件，然后进行修改、开发新页面即可，以下2个文件包括了一个页面所需要的 增、删、改、查 全部功能。
button_index.jpg

第三步：
最后将页面组件在视图层引用即可，参考位置 src/views/system-setting/button_cn_en.vue：
button_view.jpg
具体代码自行打开查看即可。

经过以上三步，前端的页面就算是开发完成了，接下来只需要在后端进行配置、权限分配就可以生效。