网上的教程确实很多,但大多数基于框架版本比较老旧,不适用于现在高版本的electron。
经过2个星期的淬炼,终于把这个electron+vue+elementui+serialport环境给搞透了。
我的电脑环境版本如下
一、使用vue create 创建项目
在确保安装了Node、npm
node -v -- 查看node版本
npm -v -- -- 查看npm 版本
以及确保安装了vue-cli脚手架
// 全局安装:install 可以简写为 i
npm install -g @vue/cli
// 查看vue cli 版本
vue -V
便可以使用如下指令,进行项目的创建。
vue create [项目名称]
等待指令运行完成,之后在展示的新界面,使用箭头键,
1、选择 “Manually select features(手动选择特性)”
2、选择项目预设,(继续使用箭头键)
使用箭头方向键选择,使用空格键选中;选中如下内容即可。
- Babel
- Router
- Vuex
- CSS Pre-processors
- Linter / Formatter
(根据自身情况,假使你擅长使用TypeScript,也可以选中此项;不选则默认是JS。)确认选项后,按“Enter”键,进行下一步。
3、选择Vue.js的版本
因为vue官方推荐Vue3,所以本项目使用的也是Vue3
4、选择router模式
因为router支持浏览器的hash和history两种模式,因为electron用的是hash,所以此处不选择向导推荐的history模式,输入n即可
5、选择CSS预编译器
向导主推Sass/Scss,选择Sass/Scss
6、选择语法检测工具,
共有四种模式:
- ESLint with error prevention only 只进行报错提醒
- ESLint + Airbnb config 不严谨模式
- ESLint + Standard config 正常模式
- ESLint + Prettier 严格模式
本项目选择的是正常模式(ESLin