标签：vue 配置 ts 选择 electron typescript vue3
文章目录
之前一直使用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
以后就可以像前端那样去开发美观的桌面端工具了
标签：vue,配置,ts,选择,electron,typescript,vue3 来源： https://blog.csdn.net/LPJCSY/article/details/123084442
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。