正文

Vue3 Electon框架快速上手：构建桌面应用必备教程

/0 浏览量
0623

引言

随着互联网技术的发展，桌面应用再次成为开发者的热门选择。Electron框架因其灵活性和跨平台性，成为了构建桌面应用的首选。而Vue3作为现代前端开发的框架，与Electron的结合更是如虎添翼。本文将带你快速上手Vue3 Electron框架，让你轻松构建出属于自己的桌面应用。

环境准备

在开始之前，请确保你的电脑上已安装以下软件：

  1. Node.js：Electron是基于Node.js的，所以需要安装Node.js环境。
  2. npm：Node.js自带npm包管理工具，用于安装和管理项目依赖。
  3. Vue CLI：Vue CLI是Vue官方提供的一个命令行工具，用于快速搭建Vue项目。

创建Vue3 Electron项目

  1. 安装Vue CLI：在命令行中运行以下命令安装Vue CLI：
   npm install -g @vue/cli
  1. 创建项目：使用Vue CLI创建一个新的Electron项目：
   vue create my-electron-app
  1. 进入项目目录：
   cd my-electron-app
  1. 安装Electron：
   npm install electron --save-dev

配置Electron

  1. 修改package.json：在package.json文件中，找到scripts字段，添加以下命令：
   "scripts": {
     "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "electron:build": "electron-builder --project.config ./electron-builder.json"
   }
  1. 创建electron-builder.json：在项目根目录下创建一个名为electron-builder.json的文件，用于配置Electron打包参数。
   {
     " appId": "com.myapp.myelectronapp",
     "asar": true,
     "win": {
       "target": "nsis",
       "icon": "src/assets/icon.ico"
     },
     "linux": {
       "target": "deb",
       "icon": "src/assets/icon.png"
     },
     "mac": {
       "target": "dmg",
       "icon": "src/assets/icon.icns"
     }
   }

编写Vue3代码

  1. 修改src/main/index.js：在index.js文件中，引入Vue和Electron相关模块，并创建一个Vue应用：
   const { app, BrowserWindow } = require('electron');
   const Vue = require('vue');
   const App = require('./App.vue');

   function createWindow() {
     const win = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true
       }
     });

     new Vue({
       render: h => h(App),
     }).$mount(win);

     win.loadFile('index.html');
   }

   app.whenReady().then(createWindow);

   app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') {
       app.quit();
     }
   });

   app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) {
       createWindow();
     }
   });
  1. 修改src/App.vue：在App.vue文件中，编写你的Vue组件代码。
   <template>
     <div>
       <h1>Hello Electron!</h1>
     </div>
   </template>

   <script>
   export default {
     name: 'App'
   };
   </script>

打包和运行

  1. 运行项目：
   npm run start

这将启动Electron应用，并在默认浏览器中打开。

  1. 打包项目：
   npm run electron:build

这将打包你的Electron应用，生成可在Windows、Linux和macOS上运行的桌面应用。

总结

通过以上步骤，你已经成功掌握了Vue3 Electron框架的快速上手方法。现在，你可以开始构建自己的桌面应用了。祝你编程愉快！

-- 展开阅读全文 --