Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use Vite+Electron to quickly build the implementation of VUE3 desktop applications", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use Vite+Electron to quickly build the implementation of VUE3 desktop applications"!

one。 Brief introduction

First, introduce vite and Electron.

Vite is a new front-end building tool that can significantly improve the front-end development experience. Launched by Youda, its tweet said, "I can never go back to webpack."

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Embedding Chromium and Node.js into binary Electron allows you to maintain a JavaScript code base and create cross-platform applications macOS and Linux-- that run on Windows without local development experience.

When you start to use vue to develop a desktop application, first search and learn about the following two off-the-shelf solutions:

Electron-vue: the project has good integration and complete package, and more articles are searched in Chinese, so it can be used directly. However, the problem is that the version of the built-in electron is too low. The version I saw when writing this article is 2.0.4, while the latest electron version is 15.1.2.

Vue CLI Plugin Electron Builder: this solution is integrated into vue-cli and can be used directly after using vue add electron-builder, eliminating the steps of basic configuration. But it can only be used under vue-cli, not with vite.

Therefore, if you want to use vite and electron, you also need to configure it yourself.

two。 Create a Vite project

1. Install vite

Yarn create vite2. Create a project

The creation command is as follows:

Yarn create vite-template vue

Create a project here called kuari.

Yarn create vite kuari-- template vue3. Enter and run

To enter the project, you need to install the dependency before running it.

Cd kuariyarn installyarn dev

The moment you hit the run command, it's almost already running, and it's really vite. At this time, according to the output, open the address preview, and you can see the initialization page.

At this point, a basic vite project is created.

three。 Configure Electron

1. Official document

In the quick start document on Electron's official website, there is an official case of using html, javascript and css to create an electron application, and vite+electron 's plan is also used for reference.

two。 Installation

First install the electron to vite application. The current version of electron is ^ 15.1.2.

Yarn add-- dev electron3. Configuration file

1) vite.config.js

Import {defineConfig} from 'vite'import vue from' @ vitejs/plugin-vue'import path from 'path' / / add / / https://vitejs.dev/config/export default defineConfig ({base: path.resolve (_ _ dirname,'. / dist/'), / / add plugins: [vue ()]})

2) main.js

To create a new file main.js, it is important to note that the loading path of index.html in the content is different from the configuration given on the official website of electron.

/ / main.js// controls the application lifecycle and the module const {app, BrowserWindow} = require ('electron') const path = require (' path') function createWindow () {/ / create browser window const mainWindow = new BrowserWindow ({width: 800,600, webPreferences: {preload: path.join (_ _ dirname) 'preload.js')}}) / / load index.html mainWindow.loadFile (' dist/index.html') / / this is different from the electron official website path Note that / / Open the development tool / / mainWindow.webContents.openDevTools ()} / / this program will call / / part of the API when the Electron finishes initializing / / and creating the browser window before it can be used after the ready event is triggered. App.whenReady (). Then (() = > {createWindow () app.on ('activate', function () {/ /) is usually on macOS. When you click the application icon in dock, if there is no other / / open window, the program will recreate a window. If (BrowserWindow.getAllWindows (). Length = 0) createWindow ()}) / / exit the program when all windows are closed except macOS. Therefore, programs and their icons on the / / taskbar should generally remain active until the user exits using Cmd + Q. App.on ('window-all-closed', function () {if (process.platform! = =' darwin') app.quit ()}) / / in this file, you can include all the rest of the application code, / / you can split it into several files and import it with require.

3) preload.js

Create a new file preload.js.

/ / preload.js// all Node.js API can be used during preloading. / / it has the same sandboxie as the Chrome extension. Window.addEventListener ('DOMContentLoaded', () = > {const replaceText = (selector, text) = > {const element = document.getElementById (selector) if (element) element.innerText = text} for (const dependency of [' chrome', 'node',' electron']) {replaceText (`${dependency}-version`, process.versions [dependency])})

4) package.json

To ensure that commands related to electron can be run, you need to modify the package.json file.

First of all, you need to set the main property. By default, electron will look for the index.js file in the root directory of the project at the beginning. Here we use main.js, so we need to define it.

/ / package.json {"name": "kuari", "version": "0.0.0", "main": "main.js", / / add "scripts": {"dev": "vite", "build": "vite build", "serve": "vite preview"}, "dependencies": {"vue": "^ 3.2.16"} "devDependencies": {"@ vitejs/plugin-vue": "^ 1.9.3", "electron": "^ 15.1.2", "vite": "^ 2.6.4"}}

Finally, we need to add the run command for electron.

/ package.json {"name": "kuari", "version": "0.0.0", "main": "main.js", "scripts": {"dev": "vite", "build": "vite build", "serve": "vite preview", "electron:serve": "electron." / / add}, "dependencies": {"vue": "^ 3.2.16"} "devDependencies": {"@ vitejs/plugin-vue": "^ 1.9.3", "electron": "^ 15.1.2", "vite": "^ 2.6.4"} four. Running

Enter the following command directly at the terminal:

Yarn electron:serve

Then we can see our desktop application and come out!

Thank you for your reading, the above is the content of "how to use Vite+Electron to quickly build the implementation of VUE3 desktop applications". After the study of this article, I believe you have a deeper understanding of how to use Vite+Electron to quickly build the implementation of VUE3 desktop applications. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.