UNI-SOP应用场景（1）- 纯前端预开发

    在平时新项目开发中，前端小伙伴是否有这样的经历，hi，后端小伙伴们，系统啥时候能登录，啥时候能联调了，这是时候往往得到的回答就是，再等等，我们正在搭建系统呢，似曾相识的感觉，可是这是实实在在的一遍一遍在重复发生的场景。一个新项目的开始，在项目开始初期，前端往往会严重依赖后端的完成进度，特别是登录，获取系统资源这块，前端想要不依赖，只能做一个模板设计，等到后端这部分完成后再替换为真实的后端接口调用，可是这爽吗？前端同事一点都不爽，都不知道联调的时候还会出什么幺蛾子！

    唠叨了下这些个小插曲，其实，这也是我们做项目中每天都在发生的事情，究其原因，是因为我们的系统不够概念化，不够抽象，边界不够清晰和明确，因为，我们都在做着重复的工作，不仅仅浪费个人的精力，同时也在消耗着公司的时间成本，更有甚者，延缓项目的上线时间，使得产品在一定程度上失去了竞争力。不过，现在不用担心，使用UNI-SOP，从根本上解决这个问题。

    我们看看使用UNI-SOP会带来什么样的改变？

    公司部署一套UNI-SOP平台系统，重要的事情说三遍：只部署一次、只部署一次、只部署一次，如果有新项目了，在认证中心新建一个项目，先把项目相关资源配置上（比如菜单、角色、权限、客户端），然后，把项目先配置到认证中心，让其暂时替代业务平台完成平台的初始化工作，接下来，前端同事就可以开始工作了，不需要等后端同事搭建系统，部署到开发环境，怎么做呢？

    最快的方法使用UNI-SOP提供的前端开发脚手架uni-sop-webkit，直接拷贝到新项目里，然后打开项目根路径下的.env文件：

VITE_APP_VERSION = '1.0.0'
VITE_APP_COPY_RIGHT = '版权所有©xxx科技有限公司   粤ICP备20200xxxx号'
# 页面标题
VITE_APP_TITLE = xxx管理平台
VITE_APP_PLATFORM = '843a16343d2c1abd200e'
VITE_APP_CLIENT_ID = 'WEB-TEST'
VITE_APP_CLIENT_SECRET = 'be72bb11bfb0af341fde2c018f2f2b69'

    然后把VITE_APP_PLATFORM替换为我们平台的ID；把VITE_APP_CLIENT_ID替换为我们创建的客户端CODE；把VITE_APP_CLIENT_SECRET替换为我们平台下创建的客户端秘钥，然后npm run dev启动，就可以看到最简单的项目了。

    ![](https://i-blog.csdnimg.cn/direct/feff09574411416291231af12088bd73.png)

    接下来，我们通过认证管理平台添加我们项目所需的其他菜单到系统。

    ![](https://i-blog.csdnimg.cn/direct/42a8c53bb72f46838f7de9993812570b.png)

    我们创建自己的业务菜单 营销/优惠卷列表。

    然后在我们业务前端 /views/pages下建立目录marketing，然后在目录marketing下建立CouponListPage.vue文件。

    重新登录，就可以看到我们的页面了，是不是简单，高效！

    业务的数据我们可以采用mock的方式来替代后端接口，这样，后端和前端都可以独立开发，除了后面会联调业务接口部分，其他平台相关的诸如登录、资源关联、权限控制这些都不需要联调，为我们省下了很多宝贵的时间成本的同时，上线代码质量也能得到保证。