electronbuilder使用AntD2.x创建electron项目[vueclipluginelectronbuilder安装]

安装 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


安装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({
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": "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