关注前端，关注原创

最近在写个人项目的web端和浏览器插件，其中一个功能是base64和图片的转换。因为分成四个小功能，所以使用的iview的tabs来展示不同功能，在其中图片转base64和base64转图片时，都需要图片预览功能。

平时遇到json、vue、css代码格式化，图片与base64互转、图片格式转换等操作时，都是找在线工具，有些工具做的还挺好，有些做的那一坨，一坨的排名还靠前……找几个在线工具都不好，终于忍不了，准备做一个自己的chrome/edge插件，方便以后开发时便捷操作。先从代码格式化开始。后续再把monaco集成进来，完成代码显示部分，demo先用输入框将就一下。

前面文章已经讲解es6模块化和commonjs模块化的导出语法，博主一贯作风都是只讲干货，不抄文档，前端同学去看看，绝对会有感触。当然讲干货意味着加入了自己的理解，如果有失偏颇，还请各位大佬在不吝指教的同时，又能保持风度。我写的两篇导入导出，只是自己的一些粗浅理解，想要了解模块化的全貌，还是要学习官方文档。这里强烈推荐阮一峰大神的es6入门教程作为参考手册。

本文主要解释前端两种模块化语法：es6模块化与commonjs模块化，纯前端一般遵循es6模块化，使用import语法导入插件，nodejs遵循commonjs模块化，使用require导入插件。本文虽长，但读完后，正常情况下，足以应付大部分导入导出场景，使用其他人插件再也不用因为导入导出的语法耗费时间。本来打算一篇文章写完的，结果发现不管怎么压缩，都需要很长的篇幅，还是把导入导出分开阐述吧。感觉读完本文有所收获，请搜索博主下一篇关于导入import的讲解。

import xxx from xxx 中存在变量或者import()函数中存在‘@/’会报错。这两种错误的原因都是因为对import模块化的理解不足。这里需要理解三个知识点：import模块，import函数，vue的@/绝对地址。

项目中遇到一个场景，页面的标题栏结构基本相同，只是图片需要动态改变，不同类型的页面，进入后，加载不同的图片。遇到问题，查官网。官网不懂，问博主。

大家有什么问题可以私信博主。

vue2+webpack升级vue3+vite，修改插件兼容性bug前面的文章主要是介绍，在升级初始阶段遇到的一些显而易见的兼容性问题和bug。随着项目迭代的不断深入，一些不容易暴露的问题也渐渐呈现。本文主要记录一些开发重构过程中的bug。

在项目中遇到个多层的json数据渲染到页面中，第一层渲染成卡片，第二层渲染成列表，第三层才真正渲染成input标签的场景。这种多层form数据的场景，无法在form标签中定义:rules变量来实现表单验证。最终实现的效果如图：第一个卡片两条数据之间的验证互不影响，第一个卡片和第二个卡片之间互不影响，而所有卡片都由一个form渲染，这样有利于直接生成一个formData。这段代码要在项目中删了，所以简单记录下，免得后面忘了。

在前面使用electron+vue3的过程中，已经验证了历史vue2代码+vue3混合开发的模式。本次旧项目vue框架整体升级中，同事已经完成了vue3、pinia、store等基础框架工具的升级。所以我此次记录的主要是vite打包工具升级以及升级后，修改项目中使用到的插件工具兼容性bug。本文章仅作为记录笔记，有类似问题但感觉上面描述不详尽的同学，可评论或私信。

最近在为部署人员开发辅助部署的工具，技术栈是vue3+vite+electron，在使用jsx语法时，提示我需要引入插件，所以就找到了vue3+vite项目引入jsx的方式。如果您的项目用vue-cli创建并自动支持jsx语法，那么此篇文章对您无益。不知道为什么，即使在include中维护了.vue，也不能在.vue文件中使用jsx，不过如果采用vue3组合式语法的规范开发，正常情况下也不需要在vue文件中使用jsx。

因为种种历史原因，我们一直选择的vue前端框架是iview，而非element，在老版的iview中，treeselect（树选择组件）一直都是半成品，后来团队买了iview pro版，树选择组件虽然能够使用，但功能仍显单一，缺少全选功能。现在项目要求实现全选，就只能自己动手了。心情烦躁者，会觉得一多半文章在讲废话，请直接下拉到最后查看实现方式。treeSelect组件内部各种互相监听太复杂了，很容易动一处爆两处bug，所以慎动。内部监听事件解决不了，就做个外部事件。

为什么不能直接通过import引入静态组件，然后把静态组件定义在这个content字段，原因上面概述说过了，我们只是想增加删除一个组件，这个功能很单一，应该只有一个入口——tabList，如果import静态引入组件，我们就需要先引入，再修改tabList，对于这种批量、机械化定义的组件而言，引入的这一步，就是个累赘。上面的代码有个问题，就是每个标签页的内容通过content字段渲染，这个字段是个字符串，实际情况中，标签页中可能是表单、可能是各种工具集合，它可能是很复杂的页面，所以一定得有组件引入的方式。

上篇文章介绍了基于router插件，view ui的路由实现。本篇文章在上文的基础上，借助router.js中配置的参数，实现首页快捷导航。通过对router的改造，进一步理解路由的用法。如果理解了上篇文章中基于router实现导航栏，那么本文只能算是个小demo，旨在打开思路——只要设计合理，router.js中的对象属性是可以随心所欲操作的。其实不论是导航栏的渲染，还是首页快捷导航的渲染，都蕴藏了一个前端很重要的思路——渲染逻辑和业务逻辑解耦。渲染逻辑，就是我拿到数据后，如何把数据渲染成页面。

上篇文章我们讲解了Vue Router路由管理工具基本的使用，但是如果同学们没有项目经验，即时看明白官方文档，也很难真正将所学应用到项目中，造成一看就懂，一用就废的尴尬局面。如何把Vue Router真正应用到项目中，才是我们的重中之重。其实写这篇文章之前，我是很犹豫的，因为很多东西，原理很简单，应用就略麻烦，写出来就更麻烦，最主要的是，我也不知道写完了，会不会有帮助。在这里抛砖引玉，有不当的地方，欢迎大佬指正。这部分代码略多，没办法都粘贴上来，如果有兴趣详细了解的同学，可私聊或评论我获取源码。

上篇文章我们已经完成了Vue3项目选型，路由管理工具使用官方推荐的Vue Router。第一次构建完整的路由管理，我建议采用iview推荐项目提供的模板，虽然模板项目很鸡贼地删减了一些优化设计，但是也足以搭建一个简易的路由管理。本文简单讲解了vue router工具的使用步骤，但只是这样，还远远不足以支撑企业级平台的搭建，一个真正能够应用于实战项目的路由设计，最起码要包含图标、路由嵌套等设计，如何搭建企业级的导航栏，留待下篇文章讲解。

深入了解vue3文件结构，彻底学会如何在vue中使用插件与工具，基于vue3+view ui，构建一套企业级管理平台