Vue3+Electron的尝试
# Vue3+typescript+vuecli+Electron的尝试
# 一、技术栈
- Vue3.x
- Electron
- Element Plus
- TypeScript
- Vue CLI 4.x
# 二、创建Vue3.x + TypeScript项目
# 1. 安装或者升级Vue CLI工具
// 查看是否安装Vue CLI
vue -V // @vue/cli 4.5.15
// 全局安装
npm install -g @vue/cli
// OR
yarn global add @vue/cli
// 升级最新版本
npm update -g @vue/cli
// OR
yarn global upgrade --latest @vue/cli
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 2. 使用vue creat [project name]创建项目
# (1).选择自定义创建
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
❯ Manually select features
1
2
3
4
2
3
4
# (2).选择需要的添加的配置项
? Check the features needed for your project:
❯◉ Choose Vue version
◉ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# (3). 选择Vue版本
? Choose a version of Vue.js that you want to start the project with
2.x
❯ 3.x
1
2
3
2
3
# (4). 不使用class 风格的装饰器,NO
Use class-style component syntax? (y/N) N
1
# (5). 用babel编译TypeScript,Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transp
iling JSX)? (Y/n) Y
1
2
2
# (6). 选择路由方式为hash模式，因为Electron只支持hash,NO
? Use history mode for router? (Requires proper server setup for index fallback in producti
on) (Y/n)
1
2
2
# (7). 根据喜好选择css预编译
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
:
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
1
2
3
4
5
6
2
3
4
5
6
# (8). 选择代码格式检查配置，推荐选择ESLint + Prettier
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
1
2
3
4
5
6
2
3
4
5
6
# (9). 何时进行代码检查，Lint on save
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert
selection)
❯◉ Lint on save
◯ Lint and fix on commit
1
2
3
4
2
3
4
# (10). 配置文件是单独存放还是都放在package.json,单独存放
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
1
2
3
2
3
# 三、引入Electron
使用Vue CLI Plugin Electron Builder (opens new window)
Vue CLI Plugin Electron Builder可以帮助我们再Vue项目中继承Electron
# 1. 安装Vue CLI Plugin Electron Builder
cd [projectName]
vue add electron-builder
1
2
2
# 2. 选择Electron版本，最新的13
# 3. 安装依赖
npm i
// OR
yarn
1
2
3
2
3
# 4. 如果使用了Vue Router可能会报错
安装完成后，假如你安装了 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 模式
WARN 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 .
1
解决方案：
// translate-demo/router/index.ts
// 看看跟下面的代码一样不
const router = createRouter({
history: createWebHashHistory(),
routes
})
1
2
3
4
5
6
2
3
4
5
6
就算一样也同样遇到了这个问题。 解决方案：
- 修改yarn源地址
- 使用4G移动网络下载Electron包
- 删除nodemodules/electron文件重新yarn
最终神奇的解决了
# 三、代码格式校验
# 1. 集成 EditorConfig 配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
在项目根目录下增加 .editorconfig 文件：
# Editor configuration, see http://editorconfig.org
# 表示是最顶层的 EditorConfig 配置文件
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2. 集成 Prettier 配置
项目创建时已经安装了Prettier,只需要创建.prettierrc文件增加配置即可：
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3. 修改.eslintrc.js，解决VSCode提示单引号警告异常
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
quotes: [1, 'single'] // 单引号
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
上次更新: 2/9/2022, 5:34:57 PM