【Electron】创建Vue3工程

记录一下快速创建 Electron Vue3 的工程的方法。

• 系统：Windows 11

1. 安装 nodejs

   参考本站【Nodejs】Windows使用NVM管理nodejs版本

2. 设置 npm 源

   npm config set registry=https://registry.npm.taobao.org

3. 安装 vue 脚手架

   # 安装 Vue 脚手架
   npm install -g @vue/cli

   安装完成后需要参考此处，允许系统运行脚本，否则用不了

4. 创建工程

   vue create test_proj

5. 尝试运行一下

   # 打开项目文件夹
   cd test_proj
   
   # 运行开发服务器
   npm run serve
   
   # Ctrl + C 退出当前运行

6. 安装 Electron

   vue add electron-builder

7. （可选）安装 ant-design-vue

   npm install ant-design-vue --save

   在main.js中添加如下代码

   import { createApp } from 'vue'
   import App from './App.vue'
   
   // 引用
   import Antd from 'ant-design-vue'
   import 'ant-design-vue/dist/antd.css'
   
   const app = createApp(App)
   
   // 安装 Antd
   app.use(Antd)
   
   app.mount('#app')

8. （可选）安装 vue-router

   npm install vue-router@4

   参考vue3如何使用vue-router

9. 运行

   npm run electron:serve

10. 构建安装包

    npm run electron:build

问题

1. electron 安装不完全

   # 打开插件目录
   cd node_modules/electron
   # 运行安装脚本
   node install.js

   如果还是报错，考虑一下开个代理