更新记录

0.1.1（2020-11-30）

0.1.0（2020-11-30）

0.1.0

平台兼容性

HBuilderX最低兼容版本
2.9.0

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

ChangeVuetoESModule

作用

将指定目录中的 .vue 单文件组件中的 <template> 、 <script> 标签里面的代码提取出来，组成一个新的 ESModule 标准的 .js 文件，供支持 ESModule 运行时调用

兼容性

目前测试并通过的运行时环境：

Chrome@laster
Electron@laster

理论上支持所有的ESModule 环境

使用

只要检测项目根目录中有 .electronWithVue 文件插件便会启动，在检测到项目中有文件变动时便会对文件进行如下操作

.vue
将输入目录中的.vue 单文件组件中的 <template> 、 <script> 标签里面的代码提取出来，组成一个新的 ESModule 标准的 .js 文件，并写入到输出目录
.js
将输入目录中的.js 写入到输出目录

默认输出目录：/js/ 默认输入目录：/vue/,可通过HbuilderX 配置来修改。

注意

没有内置babel，不支持任何语法转义，只能使用定版的ES6语法进行代码书写

插件只会处理.vue 文件中 <template>、<script>两个标签中的代码

参考项目

重要的事情说三遍 重要的事情说三遍 重要的事情说三遍

参考项目关键代码说明

详细代码请跳转 此项目 查看

main.js electron 主进程入口文件
index.html electron 渲染进程入口文件

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FETools</title>
  <!-- 引入样式文件-->
  <link rel="stylesheet" href="./lib/element.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 定义Vue应用挂载点-->
  <div id="app">
    <App/>
  </div>
  <!-- 引入打包好的三方库-->
  <script src="./lib/vue.js"></script>
  <script src="./lib/element.js"></script>
  <script src="./lib/dexie.js"></script>
  <!-- 通过ESModule 的方式引入 Vue 应用入口文件-->
  <script type="module" src="./js/index.js"></script>
</body>
</html>

初衷

当我们在使用 Vue 框架开发Electron 视图层的时候，大部分都是使用 Electron-Vue，或者Vue-cli中的插件来进行的。

现在我们有了一种新的轻量级的方案来用 Vue 开发Electron 视图层，对了就是我们目前的这个插件 ChangeVueToESmodule

既然然你已经在进行Electron 开发了，那么你肯定知道 Electron 一般使用的都是发版时最新的BLink 内核，而最新的BLink内核是直接支持 ESModule 的。所以我就想到了有没有一种简单的方式，将 .vue 单文件转化成ESModule来使用？有，通过对.vue 文件的代码进行正则匹配，可以将 <template> 标签中的代码，转化成字符串，放到组件对象的 template 属性中,然后 Electron 视图入口文件中，加载全量的 vue.minjs 文件，即可直接使用了。无须 webpack 的介入,直接体验编写 .vue 使用 ESModule的一站式服务

历程

刚开始进入FETools开发的时候，是直接使用Nodejs进行处理的。每次开发之前都需要启动一个 dev.js （ 访问地址 ）代码来监听文件变动。然而这个文件变动并不文档，有时可能存在代码丢失的情况。再次想起了许久未曾用的HbuilderX，于是决定通过插件的方式来实现，以期稳定的代码转义输出