之前一直使用qt做桌面版工具开发，但是界面美化一直是个麻烦的事情，想像前端那样有各种各样的框架可以使用，而electron插件在我的认知里是最好的选择，参考网上别人的教程，和ts一起配置时总会有各种坑，现在把我的搭建记录分享一下，希望大家能少踩坑

创建vue项目

这里默认大家都知道vue是干嘛的哈

vue create myvue

选择手动配置

这里如果是第一次创建项目的话，可以选择手动，然后创建完后可以保存下来，就如大家看到的第一个Rcoon一样，这个是我自己经常用的配置，所以就保存下来了
选择手动配置后，会有下面这些选项供你选择，按空格键就可以选择

说明

1. Babel 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
2. TypeScript TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
3. Progressive Web App (PWA) Support 渐进式Web应用程序
4. Router vue-router（vue路由）
5. Vuex vuex（vue的状态管理模式）
6. CSS Pre-processors CSS 预处理器（如：less、sass）
7. Linter / Formatter 代码风格检查和格式化（如：ESlint）
8. Unit Testing 单元测试（unit tests）
9. E2E Testing e2e（end to end） 测试

一般我们选择 1，2，4，5，6，7就可以了

配置vue版本

我们直接回车选择默认的vue3就可以

选择class样式

说明

是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的class风格的话，建议选择y

这里我直接回车选择默认的

配置typescript

说明
是否使用Babel与TypeScript一起用于自动检测的填充
我直接回车选择默认的配置

配置路由

说明
Yes 是 history模式
No 是 hash模式
Router利用了浏览器自身的hash模式和history模式的特性来实现前端路由（通过调用浏览器提供的接口）
这里我也是直接回车选择默认的

配置css预编译

说明

1. Sass/SCSS (with dart-sass) sass官方主推，推荐
2. Less 推荐
3. Stylus 不推荐

主要为css解决浏览器兼容、简化CSS代码 等问题
这里我选择默认的

配置语法检测工具

说明

1. ESLint with error prevention only 只进行报错提醒
2. ESLint + Airbnb config 不严谨模式
3. ESLint + Standard config 正常模式
4. ESLint + Prettier 严格模式

TSLint只有在选择TypeScript时才会存在
提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多
这里我们选择第四个 ESLint + Prettier

选择何时检测

说明

1. Lint on save 保存时检测
2. Lint and fix on commit 修复和提交时检测

这里我选择默认的

选择如何存放配置

说明

1. In dedicated config files 存放在专用配置文件中
2. In package.json 存放在package.json中

我直接选择默认的，直接回车

当前的配置是否保存

说明

是否保存当前选择的配置项？
如果当前配置是经常用到的配置，建议选择y存储一下当前配置项
如果只是临时使用的话就不需要存储
我选择是，保存一下，下次使用就不用手动配置了
至此，我们的vue项目就创建好了

集成electron

安装electron-builder

先进入到我们的vue项目目录中

cd myvue

然后执行

vue add electron-builder

这里我们选择13.0.0的版本
安装完成后，我们可以看到vue项目目录会多一些文件，我们需要修改一下

修改background.ts

安装typescript和ts-loader

npm install typescript
npm install ts-loader@8.2.0

或

npm install -g typescript
npm install -g ts-loader@8.2.0

这里要注意，这两个要么都全局安装，要么都局部安装，不可以混合，不然会提示找不到typescript模块
另外ts-loader不要安装最新的，版本太高会提示找不到一些方法，就安装我这个版本就可以

现在我们的整个框架都已经搭建起来了，验证一下
运行下面这个命令

npm run electron-serve

以后就可以像前端那样去开发美观的桌面端工具了