建立新的Electron+vue+Ant Design of vue

1.安裝vue-cli 

npm install -g @vue/cli 

2.建立vue專案 

vue create project_name 

3.增加electron套件 

vue add electron-builder 

4.最外層建立 vue.config.js 檔案 

 module.exports = { 

     pluginOptions: { 

         electronBuilder: { 

             preload: 'src/preload.js', 

             nodeIntergration:true 

         } 

     } 

} 

5.在src資料夾內新增 preload.js 檔案 

const {ipcRenderer} = require('electron'); 

window.ipcRenderer = ipcRenderer; 

6.修改 background.js 內容 最上面新增 

const Path = require('path') 

 webPreferences裡面新增 

,preload: Path.join(__dirname,'preload.js')

7.加入ant套件

npm install ant-design-vue --save

npm install --save @ant-design/icons-vue

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

8.修改main.js加入以下

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

import '@ant-design/icons-vue'

修改

createApp(App, Antd).use(Antd).mount('#app')

8.啟動

npm run electron:serve