文章目录
之前一直使用qt做桌面版工具开发，但是界面美化一直是个麻烦的事情，想像前端那样有各种各样的框架可以使用，而electron插件在我的认知里是最好的选择，参考网上别人的教程，和ts一起配置时总会有各种坑，现在把我的搭建记录分享一下，希望大家能少踩坑
创建vue项目
这里默认大家都知道vue是干嘛的哈
vue create myvue
选择手动配置
这里如果是第一次创建项目的话，可以选择手动，然后创建完后可以保存下来，就如大家看到的第一个Rcoon一样，这个是我自己经常用的配置，所以就保存下来了
选择手动配置后，会有下面这些选项供你选择，按空格键就可以选择
说明
- Babel 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
- TypeScript TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
- Progressive Web App (PWA) Support 渐进式Web应用程序
- Router vue-router（vue路由）
- Vuex vuex（vue的状态管理模式）
- CSS Pre-processors CSS 预处理器（如：less、sass）
- Linter / Formatter 代码风格检查和格式化（如：ESlint）
- Unit Testing 单元测试（unit tests）
- 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预编译
说明
- Sass/SCSS (with dart-sass) sass官方主推，推荐
- Less 推荐
- Stylus 不推荐
主要为css解决浏览器兼容、简化CSS代码 等问题
这里我选择默认的
配置语法检测工具
说明
- ESLint with error prevention only 只进行报错提醒
- ESLint + Airbnb config 不严谨模式
- ESLint + Standard config 正常模式
- ESLint + Prettier 严格模式
TSLint只有在选择TypeScript时才会存在
提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多
这里我们选择第四个 ESLint + Prettier
选择何时检测
说明
- Lint on save 保存时检测
- Lint and fix on commit 修复和提交时检测
这里我选择默认的
选择如何存放配置
说明
- In dedicated config files 存放在专用配置文件中
- 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
以后就可以像前端那样去开发美观的桌面端工具了