# 与主流的框架集成

# Vue

# Vue2集成

首先使用Vue-cli来初始化一下Vue2的项目
安装vue-cli-plugin-electron-builder
```
vue add electron-builder
```
注意：选择最新的Electron版本后进行升级~
```
npm i electron@15 -S
```
然后，再使用对应的serve与build命令来进行开发&打包测试。

# Vue3集成

首先使用Vue-cli来初始化一下Vue3的项目：

特别说明：从2022年2月7号开始，Vue3的版本将会为了默认版本。

安装vue-cli-plugin-electron-builder
```
vue add electron-builder
```
注意：选择最新的Electron版本后进行升级~
```
npm i electron@15 -S
```
然后，再使用对应的serve与build命令来进行开发&打包测试。

# 常见问题

有一个已知的错误：

可以删除package.json中的main属性即可。

关于devTools的版本：

目前，如今的测试已经全部没有上面的问题了。

可以下载最新的代码：

{
  "name": "vue3-electron",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "electron": "^15.3.6",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-cli-plugin-electron-builder": "~2.1.1"
  }
}

下载链接：vue3-electron.zip

# React

方案：

electron-react-boilerplate
使用vite开发electron

# electron-react-boilerplate

官方文档：https://electron-react-boilerplate.js.org/ (opens new window)

使用方式：

git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name

国内加速：

git clone --depth 1 --branch main https://github.com.cnpmjs.org/electron-react-boilerplate/electron-react-boilerplate.git your-project-name

接下来使用npm install 安装依赖

官方集成的示例：

原生模块实例

第二个渲染器窗口

second renderer window (opens new window)

CSS和样式方案集成

其他

# Vite集成

Vite提供了许多有用的功能，例如：TypeScript、TSX/JSX、CSS/JSON导入、CSS模块、Web Assembly等等。

该项目集成：

Electron 16
Vite 2.7.x
TS 4.5.x
Vue 3.2.x

同时支持React：https://github.com/soulsam480/vite-electron-react-starter (opens new window)

其他Vite官方的集成示例：https://github.com/vitejs/vite/tree/main/packages/create-vite (opens new window)

安装方法：

git clone https://github.com/soulsam480/vite-electron-react-starter.git react-electron-vite-demo

国内加速源：

git clone https://github.com.cnpmjs.org/soulsam480/vite-electron-react-starter.git react-electron-vite-demo

# 配置Vite+Vue3模板

# 初始化

git clone https://github.com.cnpmjs.org/cawa-93/vite-electron-builder.git vite-electron-template

安装依赖npm i，然后就可以开发了。

开发脚本：

npm run watch

# 集成sass

npm i -D sass

# 配置路径别名alias

修改preload/vite.config.js，renderer/vite.config.js，main/vite.config.js中的关于alias的配置：

const config = {
  // ...
  resolve: {
    alias: {
      '@': join(PACKAGE_ROOT, 'src') + '/'
    }
  },
  // ...
}

然后全文查找/@/替换成@/即可。

# TypeScript问题

可以修改script标签，改为script lang=ts，新增typescript语法支持，需要安装依赖：

npm i @typescript-eslint/parser -D

# 集成prettier&ESLint

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

新建prettier的配置.prettierrc.js

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false, // 未尾逗号
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 单引号
  quoteProps: "as-needed",
  bracketSpacing: true,
  trailingComma: "none", // 未尾分号
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: "always",
  insertPragma: false,
  requirePragma: false,
  proseWrap: "never",
  htmlWhitespaceSensitivity: "strict",
  endOfLine: "lf",
};

集成ESLint与prettier

修改.eslintrc.json文件

{
  "root": true,
  "env": {
    "es2021": true,
    "node": true,
    "browser": false
  },
  "extends": [
    "eslint:recommended",
    /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "ignorePatterns": [
    "types/env.d.ts",
    "node_modules/**",
    "**/dist/**"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/consistent-type-imports": "error"
  }
}

进行所有的文件格式化：

"lint:prettier": "prettier --write --loglevel warn \"packages/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""

新增一个package.json中的脚本：npm run lint:prettier

注意：VSCode的插件是否启用prettier + eslint，检查插件的状态，并且查看vscode的配置是否是prettier为默认的格式化工具。

# 集成Vuex

npm i -S vuex@4

新建 renderer/src/store.ts：

import {createStore} from 'vuex'

const store = createStore({
  state: {},
  mutations: {}
})

export default store

修改index.ts文件：

import {createApp} from 'vue';
import App from '@/App.vue';
import router from '@/router';
import store from '@/store';

createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

← 核心概念业务项目整合 →