业务中经常会遇到多行多列展示的表单需求，所以我们会搭配着栅格组件来实现。利用栅格化布局 span 超过 24 会自动折行的功能。

<el-form ref="form" :model="form" label-width="auto">
  <el-row :gutter="10">
    <el-col :span="12">
      <el-form-item label="字段A">
        <el-input v-model="form.a" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span='12'>
      <el-form-item label="字段B">
        <el-input v-model="form.b" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

如果这样组合使用的同学，肯定会遇到过表单项错位的问题。因为 Element UI 是栅格组件默认是使用的 float 布局的，所以如果你的 <el-form-item> 元素高度不一致的话，就会出现下边截图中布局错位的问题。

字段C项并没有正确出现在字段A项的正下方，而是错开一列出现在了字段B的下方。

解决方式
在【运行和调试】面板右侧的 齿轮（⚙） 或者 更多（···） 按钮上右键，勾选【开始调试】即可。

昨天在思否遇到一个问题 👉 VSCode启动调试控件被不小心隐藏了，如何恢复显示？
开始以为是一个很初级的问题，就是问题主把【活动面板】中的【调式面板】隐藏了，不知道如何恢复显示了。

那么直接在【活动面板】中右键然后在弹出的菜单中勾选【运行和调试】就行了。

在内部系统开发时，经常会有业务部门会要求开发Excel导入/导出的功能。这种需求非常的常见，如果只是基础的需求开发起来也比较容易。只是有一些特殊的业务下会有对导出的工作表样式会有要求以及会有锁定的需求。

一般来说这些相关的功能都会让后端同学来帮忙。后端同学忙不过来的时候我们也会使用 SheetJS 这个库来处理，社区也有很多基于它的各种增强。但因为社区版的样式处理非常麻烦，也经常会看到有小伙伴在社群里面吐槽自定义样式不好做。所以项目后期就切换到了 ExcelJS，开发体感更加友好且支持的功能更多。

对于 ExcelJS 介绍的部分就不过多赘述了，社区里面有很多相关的文章可以自行检索。

这篇笔记主要是解决日常业务开发中遇到的几个常见需求，比如说：

• 单元格的下拉选择
• 单元格的数据校验
• 单元格和工作表的编辑保护

注意：文章中使用的 HBuilderX 版本为 4.24。

使用 HBX 创建的 uni-app 项目（非CLI创建），想要定义环境变量一直是一个让人非常困扰的事情。
官方的文档 关于环境变量的说明也非常暧昧不清。

通过关键词 环境变量 检索会出现5篇相关文档：

1. #配置环境变量 - vue.config.js | uni-app官网
2. #判断平台 - 开发环境和生产环境 | uni-app官网
3. #环境变量 - Vue2升3指南 | uni-app官网
4. 编辑器配置 | uni-app官网
5. 真机运行常见问题@run | uni-app官网

所以我早期定义环境变量就是使用的第一个文档链接中使用 DefinePlugin 来定义环境变量的方式

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
        args[0]['process.env'].MY_TEST = '"test"' // 注意需要多层引号包裹
        return args
      })
  }
}

注意：注意需要多层引号包裹自定义环境变量的值。

const test = process.env.MY_TEST // test

console.table(process.env)
// (索引)  值
// NODE_ENV  development
// VUE_APP_NAME  Test-Project
// VUE_APP_PLATFORM  h5
// BASE_URL  /
// MY_TEST  test

我这边在声明环境变量时，不需要使用 VUE_APP_ 这样的前缀，但是官方的示例中是有的。如果你无法在业务代码中正确获取到，可以尝试添加 VUE_APP_ 前缀（👉 VUE_APP_MY_TEST）

工作中长期维护的项目提出了一个需求：

现在项目分为 国内版 和 欧洲版。使用的同一个域名的两个子域名，分别指向部署在国内和欧洲的服务。
例如说 www.domain.com 和 eu.domain.com 这样两个应用入口。

虽然我们会在应用上标注清楚是国内版还是欧洲版。但是仍然会有不少的用户会打开错误的应用。所以想要把应用入口统一为一个。项目按照访问用户的IP所在地区自动切换到国内和欧洲的应用中。并且仍然允许用户手动切换服务器，允许跨境使用。

想了很多实现方案最后确定为在DNS上面按照IP归属做分流。通过访问用户的IP把在欧洲的用户定向到欧洲的服务，在国内的分流到国内的服务上。
实质上还是一个地区部署一整套的服务。只不过说现在应用入口的统一了，域名也是统一成 www.domain.com 一个了。

然后在对应的服务器上做 Nginx 的接口代理转发，保证可以正常访问其他地区的服务。避免因为访问系统的用户IP是固定的，在DNS上直接就被分流掉了，导致无法访问到另一个地区服务的情况。

前段时间把项目的脚手架升级到 VueCLI 5 同步也升级了一些依赖项。所以这几天都是在自测，看看是不是有一些很明显的 BUG，以及解决一些依赖升级之后的 WARN。

在测试一个下拉菜单（Dropdown）时，发现了一个问题：使用方向键操控会抛出一个异常：
Uncaught TypeError: ele is undefined

查看控制台输出，对应异常抛出的位置是 resetTabindex 函数，在 ele.setAttribute('tabindex', '0') 执行时 ele 是 undefined，所以抛出了这个异常。

那么看函数调用链看 ele 是怎么来的。
👉 是 handleItemKeyDown 函数执行传入的 this.menuItems[nextIndex]

进入调试模式之后发现整个 menuItems 数组是空数组，并没有把我在模板中渲染的 el-dropdown-item 都包含进来。

当前项目使用的后台管理模板的 layout 的部分是有直接引用 sass 文件暴露出来的变量在业务代码中使用的。
比如说:

• 导出 👉 /src/styles/variables.scss at v4.0.0 · PanJiaChen/vue-element-admin
• 使用 👉 /src/layout/components/Sidebar/index.vue at v4.0.0 · PanJiaChen/vue-element-admin

也没有怎么了解过看这个魔法使用的来源文章 中也只说是 webpack 支持了 CSS Modules 的功能，可以直接使用 :export 功能。

只需要在 .scss 中使用 :export { } 把需要暴露的变量暴露出来就可以在 JS 中使用 import 导入了

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

最近有一个官网开发的需求，本来是准备利用老的技术栈，快速开发、快速结束。比如说找一个 PHP 或者 JSP 技术栈的成熟 CMS 框架。前端只需要写一个主题模板，然后用插值表达式做一下循环和动态内容的渲染就行了。

可团队内没有 PHP 技术栈。Java 小伙伴也忙的要死，没有时间现学一个 CMS 框架来配合我。但项目上线时间又安排的非常近，没办法一直等。
就想着先使用有 SSG 功能的前端全栈框架先把项目搞起来，把需求先做完。后面再看情况是做 SSR 也行。如果不做 SEO 没有很多文章发布的场景，也可以仅靠 SSG 和钩子触发自动部署即可。

正巧在播客里面听到一个新的全栈框架 Astro，满足了我上便提到的 SSG 和 SSR 需求。前期可以通过撰写 markdown 文档作为 content 资源来满足项目前期的文章发布需求。

而且 Astro 提出的 群岛 概念非常让我感兴趣！

const { foo, bar } = defineProps(['foo', 'bar'])

在思否刷到一个问题 🔗 Vue3: 响应式 props 解构得到的变量将不是响应式？也不会更新？ 按照问题中引用的文档描述来说确实是不能够解构返回值的。但是问题主提供的两个例子又说明了实际情况下，defineProps() 的返回值是能够被解构的。

VueJS 的 <script setup> 文档 中关于 defineProps() 的部分也没有针对其返回值是否能够解构做出说明。
我在Vue3项目的开发过程中并没有考虑到过这个问题，一直都是通过 props.xx 的形式来使用的。一下子就命中了我的知识盲区，还是 Vue3 写的少了啊。

不过在问题主引用的文档开头有一个响应性语法糖被 移除 的提示，所以去看了一下提示中链接的 废弃原因。

现在CSS写的是越来越少了，以至于刷到这样一个问题 👉 前端文章页的内容获取自后台编辑器，如何让他不受全局样式影响？。
思维惯性下就开始考虑各种样式隔离方案，而完全忽略掉了还有一种使用CSS的样式还原方式（all: revert） 来避免全局样式对于富文本内容的样式污染问题。

相比于各种前端的CSS样式隔离方案的高成本，使用 all: revert 方式来简易实现局部区域的样式还原，仅仅需要配置一条这样的样式规则：

<template>
  <div id="test">
    <div v-html="html"></div>
  </div>
</template>
<style>
#test * {
  all: revert;
}
</style>

但因为CSS样式的权重问题，你看到了我是使用的 ID选择器，而不是 Class选择器。
所以如果说全局样式有使用 #app 来匹配的话，就没办法使用 all: revert 的方式来还原浏览器默认样式了。这也是这个方案的短板，不过大部分情况下的样式都是可以被重置的。