[pig框架源码分析] 02 - 不打开后端程序，轻量的前端开发

导读

一直以来，二次开发[pig框架]都是需要先开启后台，然后再打开前端程序，如果再开个Idea，16G内存根本不够用，多次出现电脑宕机罢工的情况。

其实总的来说，就是想实现mock，暂时只做个简单的显示页面吧。。。

经过最近的多次研究和尝试，在框架代码基础上实现了仅供前端开发的功能。最终效果如下。

了解vue路由vue-router

之前一直纠结为何我的代码无法跳转到新增加的vue路径上（比如[pig框架实战] 手撕视频管理发布平台 中的myvideos等页面），无非两点：

• vue-router：vue得知道有这个页面
• 权限：router.beforeEach （permission.js）

vue-router资料

Vue2.x基础免费视频教程 https://www.bilibili.com/video/BV1Zb411T7dm?p=31

其实不复杂，一个小时也就明白基本原理了，只是一直没想到是这个原因导致的。

增加路由项

pig框架的路由项目是服务器下发的，本地只有有限的几个页面路由信息。

请求路由的api是getMenu:

export function getMenu(id) {
  return request({
    url: '/admin/menu',
    params: {parentId: id},
    method: 'get'
  })
}

我们直接修改这个函数的内容，不用请求，直接返回json数据就好了，数据获取后，框架会将数据动态添加到vue-router中。

这里涉及到Promise的用法，推荐一个很不错的教程：最好理解的Promise教程 https://www.bilibili.com/video/BV1454y1R7vj

导航守卫 permission.js

导航守卫 https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

这里直接全部放过也就达到目的了。

了解vue-cli，添加控制变量

为了通过配置的方式控制代码是只做本地展示，还是需要用到服务器。这就涉及到了vue的脚手架了vue-cli。

学习视频 Vue-cli 免费视频教程 https://jspang.com/detailed?id=26，能初步了解vue-cli。

然后根据文章vue-cli-service 机制 https://segmentfault.com/a/1190000020338771，了解其原理。

最后为了将配置打包到静态页面中，参考了vue官方文档：模式和环境变量
https://cli.vuejs.org/zh/guide/mode-and-env.html

代码实现

增加配置文件pig-ui\.env.development

主要就是增加了变量VUE_APP_MY_FLAG_ONLY_UI，用于区分是否只做前端页面

pig-ui\src\api\admin\menu.js 增加路由项

pig-ui\src\permission.js 不过滤权限

参考资料

• Vue-cli 免费视频教程 https://jspang.com/detailed?id=26
• 最好理解的Promise教程 https://www.bilibili.com/video/BV1454y1R7vj
• qq群：夜猫逐梦技术交流裙/953949723