electron-builder使用AntD 2.x创建electron项目[vue-cli-plugin-electron-builder 安装]

安装 vue-cli 工具

yarn global add @vue/cli

新建一个项目

vue create antd-demo

进入项目

cd antd-demo

安装必要的插件

#安装less less-loader
npm install less less-loader --save-dev
#安装css-loader
npm install --save-dev css-loader
#安装style-loader
npm install --save-dev style-loader

配置less

less版本^3时，使用antd会报错，所以要配置一下。

#根目录创建vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions:{
                    javascriptEnabled: true,
                }
            }
        }
    },
}

安装并调用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: true }
    ]
  ]
#配置文件具体位置
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
}

设置electron，解决跨域

  const win = new BrowserWindow({
     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": "antd",
  "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.0.0-rc.4",
    "core-js": "^3.6.5",
    "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",
    "css-loader": "^5.0.1",
    "electron": "^9.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "less": "^3.13.0",
    "less-loader": "^7.1.0",
    "style-loader": "^2.0.0",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "generator-star-spacing": "off",
      "no-tabs": "off",
      "no-unused-vars": "off",
      "no-console": "off",
      "no-irregular-whitespace": "off",
      "no-debugger": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

版本

@vue/cli 4.5.9
vue 3.0
ant-design-vue 2.0.0-rc.4

axios安装和关于报错

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

报错

重新安装一下

vue add electron-builder