前端如何玩转虚拟机_前端开发 | 看滴普大前端是如何玩转”前端开发脚手架“的...

在滴普科技这个卧虎藏龙的地方，有着一群身怀绝技，才华横溢的开发，他们苦心钻研技术，致力于回馈社区。小水滴作为一个热心的搬运工，将给大家带来一系列的前端技术成果的分享。本次，大前端团队为大家带来了前端开发脚手架的硬核解说~

create-nuxt-app 2.0 ：

集成更多工程化实践

简单介绍

@femessage/create-nuxt-app 是滴普前端开发脚手架工具。提供后台管理和移动 Web App 两个项目模板。基于中后台项目交付，提供一系列预设功能。让前端开发可以专注于业务的实现，无需关注全局逻辑和构建发布配置，提高项目从 0 到 1 的效率。

经历了过去一年大小中后台项目，脚手架集成了更多工程化实践。接下来带大家看一下都有哪些令人期待的特性。

✨新特性预览

‍用户体验提升

保证最小的主显示区域

开发可以不用考虑屏幕尺寸了，对于部分屏幕特别小的用户，就委屈多划一下鼠标，以保证最低的阅读体验。

以往很多后台管理页面是这样的，表格缩在一块，阅读性大打折扣。

跨平台统一的滚动条

基于 el-scrollbar 实现，这是一个 element 中没有公开的组件。

基于 Deepexi Design 的色彩和文字方案

鉴权失效重定向

登录凭证导致的重新登录，登录后会重定向到失效时的页面。用户不需要重复导航到相关页面。功能虽然简单，但是项目组无暇顾及登录优化，统一在脚手架中实现就最好不过。

默认的接口状态码消息

再也不需要担心接口返回不规范，导致只提示状态码，没有文字信息的问题。

开发体验提升

提供一套较为完整的面包屑方案

nuxt 生态里面，面包屑的方案一直是难题。而且业务中也会经常出现动态面包屑的需求。这一方案可以满足这些需求。

Nuxt 里面实现面包屑难在哪儿呢？

浏览一下 Vue 生态的面包屑解决方案不难发现，基本都是基于路由匹配实现的。然而 Nuxt 以文件目录生成路由的特性，将路由表屏蔽了。对于开发者可以说是又爱又恨。

另外一个痛点就是现在很多中后台项目的面包屑除了需要实现导航的功能，还需要动态渲染一下部门名字、模块名字等，实现区分多个同级目录的作用。

因此提供一种统一的方案，省得每个团队都各自踩坑。统一每个项目的实现也有利于项目人员的临时调度，不需要很多时间就能上手项目了。

提供一个数据分层的方案 service 层

对于企业级 web 应用，接口可以说是海量的。如果既想享受 nuxtjs/axios 封装带来的便捷，又想实现数据分离，则需要一些技巧。下面罗列一下这个方案带来的直观感受:

• 调用接口不需要各种 import 了，同时也不会出现散落各处的接口路径字符串。
• 统一且语义化的数据请求调用方式，代码更加直观
• 临时 mock 数据不会影响到视图层，可以直接在 service 层介入

支持 ES optional-chaining 和 nullish-coalescing-operator

// optional-chainingconst adventurer = {  name: 'Alice',  cat: {    name: 'Dinah'     }};const dogName = adventurer.dog?.name; console.log(dogName);// expected output: undefinedconsole.log(adventurer.someNonExistentMethod?.())// expected output: undefined// nullish-coalescing-operatorconst foo = null ?? 'default string';console.log(foo);// expected output: "default string"const baz = 0 ?? 42; console.log(baz);// expected output: 0

这两个新特性为写出健壮的代码提供了巨大的方便

// 判断值是否「真」真值// Beforeimport { isNull, isUndefined } from "utils" const isTruly = value => !isNull(value) && isUndefined(value)const value = isTruly(val) ? val : ""  // Afterconst value = val ?? ""  // 避免 can't find property xxx of undefinedconst get = {}// Beforeconst obj = get.a && get.a.obj// Afterconst obj = get.a?.obj

提供 svg-icon 的集成

更方便的使用 svg-icon，也不需要自己操心 webpack 配置了。往指定目录存放 svg 文件即可。

使用细节

对于大部分的特性，开发者不需要知道细节也能享受得到。因为脚手架的初衷便是为业务开发屏蔽掉不必要配置和全局逻辑，让他们专心于业务逻辑的开发即可。

然而面包屑和 service 层只是提供了一个方案，开发者必须要了解实现才能运用自如。

更多内容请点击左下方 “了解更多” —— 业务需求中加上推荐码 deepexi@toutiao 将有专人联系开通。