前言
最近有个需求，需要新起一个 Electron 的项目，既然现在都是 Vue3 了，那肯定要玩一玩呀，然后开始搜各种资料，踩了一些坑，把过程记录下来，一个是方便自己后面再查，还有一个是帮助大家少踩坑
一、技术栈
- Vue3
- Electron
- Element Plus
- TypeScript
- Vue CLI 4.x
不用 vite 的原因是，目前 vite 还不太会用，试了试有些坑得花时间去解决，目前没有很多时间去折腾，等以后有空再去研究下
二、创建 Vue3 + Typescript 项目
1.安装或升级 Vue CLI 工具
这里借助 Vue CLI 工具去创建
可以先看下有没有装 Vue CLI 工具 或者版本是多少
详情见官网：Vue CLI
vue -V // @vue/cli 4.5.13
没有安装或者版本老的话，使用下面的命令全局安装或升级
// 全局安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
// 升级最新版本
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
2. vue create xxx 创建项目
第一步：使用vue create xxx(项目名)以下命令创建 vue 项目
// eg，我创建一个项目，叫 translate-demo
vue create translate-demo
出来三个选项：
- Default ([Vue 2] babel, eslint)
- Default (Vue 3) ([Vue 3] babel, eslint)
- Manually select features
我选第三个 Manually select features
第二步：选择需要添加的配置项
我选了这5个：
- Choose Vue version
- Babel
- TypeScript
- Router
- Linter / Formatter
大家可以根据自己的需要加
第三步：选择 Vue 版本，当然是 3 啦
第四步：问你要不要使用class 风格的装饰器，我不太习惯，选了 N（默认）
具体的内容可以看下官方文档，
第五步：
用 babel 编译 TypeScriptÏ，选是
可以学习下大佬的这篇文章：为什么说用 babel 编译 typescript 是更好的选择](juejin.cn/post/696863…)
第六步：路由模式配置，让你配置 history模式，选 N，因为 Electron 只支持 hash模式
第七步：选择代码格式化检查配置，选 ESLint + Prettier，看你喜欢哪种
不要用 Standard config，有坑，坑了我好久，网上搜了一堆没解决，最后换了 Prettier
一直报这个错 Parsing error: Unexpected token :还有Unexpected token as的错
为啥不选 TSLint，可以看下这篇文章，TypeScript 官方决定全面采用 ESLint
\
第八步: 问你啥时候检测代码，当然是保存的时候啦，选 Lint on save
第九步: 问你 babel、ESLint的配置文件是单独创建，放在根目录，还是放 package.json里面，我选了In dedicated config files单独创建
具体区别我也不太清楚，搜来的说法是，单独的配置文件放在根目录对编辑器更友好？
第十步：问你要不要保存配置，我不保存，下次再说
然后等待配置完成，cd translate-demo 进入项目
三、引入 Electron
在 translate-demo项目下，我们输入下面命令，安装 Vue CLI Plugin Electron Builder
Vue CLI Plugin Electron Builder可以帮助我们在 Vue 项目中集成 Electron
Ps: 不要再用 electron-vue 了，已经太久没更新了
vue add electron-builder
选择 Electron的版本，选择最新的 13
安装依赖
npm i
2个注意点
第一个: 路由模式
安装完成后，假如你安装了 Vue Router，它会提示你 It is detected that you are using Vue Router. It must function in hash mode to work in Electron. Learn more at https://goo.gl/GM1xZG
也就是我们的路由的 mode 必须为 hash 模式，对应之前的第六步
// translate-demo/router/index.ts
// 看看跟下面的代码一样不
const router = createRouter({
history: createWebHashHistory(),
routes
})
第二个: 注释代码（如果能访问谷歌的话，这步跳过）
如果不能访问外网，installExtension 方法会持续请求安装VUEJS3_DEVTOOLS，然后导致项目启动非常慢，必须等它五次请求超时后，才能启动项目，所以要不不使用这个插件，要不就找个法子科学上网Ï
// translate-demo/background.ts
// 第一部分，这行代码注释掉
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
// 第二部分，这几行代码注释掉
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS3_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
然后没问题后，运行下看看
npm run electron:serve
四、Element Plus 按需引入
1、安装 Element Plus
npm install element-plus --save
2、安装 babel-plugin-import 实现按需引入
npm install babel-plugin-import -D
// OR
yarn add babel-plugin-import -D
3、引入样式(CSS)
这里以 CSS 为例，SCSS 等看官方文档
在 babel.config.js中，添加下面代码
// translate-demo/babel.config.js
module.exports = {
+ plugins: [
+ [
+ 'import',
+ {
+ libraryName: 'element-plus',
+ customStyleName: name => {
+ return `element-plus/lib/theme-chalk/${name}.css`
+ }
+ }
+ ]
+ ],
presets: ['@vue/cli-plugin-babel/preset']
}
4、全局引入组件
在 main.ts中，全局引入组件
// translate-demo/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
+ import { ElButton, ElCard } from 'element-plus' // 你需要引入的组件
+ const components = [ElButton, ElCard] // 你需要引入的组件
+ const app = createApp(App)
+ components.forEach(component => {
+ app.use(component)
+ })
+ app.use(router).mount('#app')
最后
项目搭建的教程就到这里结束了，后面有时间的话会出一下在项目中怎么写 Electron 页面的教程
