electron-builder使用ant-design-vue創建electron項目[2021/10/29更新]

安裝 vue-cli 工具

yarn global add @vue/cli

新建一個項目

vue create antd-demo

進入項目

cd antd-demo

安裝並調用vue-cli-plugin-electron-builder

說明:
比較流行的electron-vue的框架有兩個：
1.nklayman/vue-cli-plugin-electron-builder
地址：https://github.com/nklayman/vue-cli-plugin-electron-builder
2.SimulatedGREG/electron-vue
地址：https://github.com/SimulatedGREG/electron-vue
這兩個雖然SimulatedGREG/electron-vue star比較多，但是他已經很久沒有更新了，所以推薦更新比較頻繁的vue-cli-plugin-electron-builder

vue add electron-builder

設置electron淘寶鏡像

npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

安裝ant-design-vue 2

npm i --save ant-design-vue@next

局部導入組件

import { createApp } from 'vue'
import { Button,Row ,Col,Icon,Input,Select,Tabs} from 'ant-design-vue';
import App from './App.vue'


const app = createApp(App);
app.config.productionTip = false;
app.use(Button);
app.use(Row);
app.use(Col);
app.use(Icon);
app.use(Input);
app.use(Select);
app.use(Tabs);
app.mount("#app");

配置樣式按需加載

#安裝babel-plugin-import
yarn add babel-plugin-import --dev
#修改配置babel.config.js
#增加
  plugins: [
    [
      "import",{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"}
    ]
  ]
#配置文件具體位置
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",{ libraryName: "ant-design-vue", libraryDirectory: "es", style:"css"}
    ]
  ]
}

設置electron，解決跨域

  const win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      webSecurity: false,
    }
  }

啟動與創建

#啟動
yarn electron:serve
#創建
yarn electron:build

附錄

配置

#package.json
{
  "name": "xxx",
  "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": {
    "ant-design-vue": "^2.2.8",
    "core-js": "^3.6.5",
    "less-loader": "^7.1.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.3",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "vue-cli-plugin-electron-builder": "~2.1.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

版本

@vue/cli 4.5.14
vue 3.0
ant-design-vue 2.2.8

axios安裝和關於報錯

請查看：https://www.cnblogs.com/cnlihao/p/14109970.html

報錯

重新安裝一下

vue add electron-builder

原因： less-loader安裝的版本過高
解決方案：

1.npm uninstall less-loader
2.npm install less-loader@7.1.0

原因：缺少less-loader

解決方案：

1.npm install less-loader@7.1.0