构建Vue3桌⾯应⽤程序的⽅法
在本⽂中，我们将研究如何通过 Vite 开发 Vue 3 桌⾯项⽬。
在项⽬中会⽤到，⼀种最流⾏的框架，可使⽤Javascript构建跨平台的桌⾯应⽤程序。因此，许多受欢迎的应⽤程序都在使⽤Electron，例如VSCode，Slack，Twitch等。
先看看要做什么：
尽管这只是⼀个 Vite 的基本模板，但它跑在专⽤程序⽽不是浏览器中。这是构建⾃⼰的桌⾯应⽤的必要步骤。
以下是开发过程。
创建的基本 Vite 程序
⾸先创建 Vite 应⽤。在这⾥不会过多介绍 Vite 的⼯作原理。
在终端下执⾏以下命令：
npm init @vitejs/app
cd [project-name]
npm install
完成了，先在浏览器中试⼀下。
在终端中简单的运⾏ npm run dev 命令。然后在浏览器中打开本机地址，可以看到是这样的：
没有问题，接着就该把 Electron 添加到它的设置中了。
在 Vite 项⽬中添加 Electron
这⾥按照在我们的 Vite 应⽤中进⾏⼀些调整。
⾸先安装 Electron。在终端下输⼊以下命令：
Install Electronnpm install --save-dev electron
接着再看⼀下 Electron ⼿册。
⼿册上说简单的 Electron 配置需要四个⽂件：
package.json —— 这个已经有了
main.js
preloader.js
index.html
看上去项⽬中已经有了 main.js和index.html⽂件，但它们是 Vite 的⽂件，⽽不是 Electron 的⽂件。 Vite 的⽂件只能⽤于运⾏Vite 程序，所以还需要提供单独的 Electron ⽂件。
main.js ⽤于创建桌⾯程序并加载到 index.html 中，它还应该包括我们构建的 Vite 程序代码。
构建 Vite 程序
所以⾸先必须构建 Vite 程序。因为要把它与 Electron 进⾏整合，所以还需要做⼀些额外的配置。我们要确保在构建项⽬时，对最终 javascript 和 css ⽂件的所有引⽤都指向正确的路径。
要构建的 Vite 项⽬将会创建以下结构的 dist ⽬录。
但是由于我们的 Electron 代码位于项⽬的根⽬录中，所以应该将整个项⽬的基础设置为 dist ⽂件夹。
可以通过 path 库在
//fig.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// vitejs.dev/config/
export default defineConfig({
base: solve(__dirname, './dist/'),
plugins: [vue()]
})
现在可以在终端中运⾏ npm run build 来创建 dist ⽬录了。设置 Electron 的 main.js
下⼀步是在项⽬的根⽬录中创建 main.js ⽂件。
创建完毕后我们只需要从 Electron quick start guide 中复制粘贴代码就⾏了。
在我们加载 index.html 的地⽅，要将其改为 dist/index.html，以便在 dist ⽬录中使⽤该⽂件。所以 main.js 中的最终代码是这样：
//main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('dist/index.html')
electron vue教程}
app.whenReady().then(() => {
createWindow()
<('activate', () => {
if (AllWindows().length === 0) {
createWindow()
}
})
})
<('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
创建并编写 preload.js.
接下来让在项⽬根⽬录中创建 preload.js ⽂件，然后再次使⽤，这次不必修改任何内容。
//preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = ElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
修改 package.json
差不多快要完成了，最后还需要对 package.json⽂件进⾏⼀些修改，以便运⾏ Electron 命令。
⾸先要设置 main 属性，在默认情况下，Electron 会在根⽬录中查 index.js ⽂件并执⾏，但是由于我们的⽂件名为 main.js，所以需要在 package.json 中定义。
//package.json
{
"name": "vite-electron",
"version": "0.0.0",
"main": "main.js", // 这⼀⾏
...
}
然后设置运⾏ Electron 的⽅式，在 scripts 部分中新创建⼀个名为electron:start 的脚本，内容是electron . 。
//package.json
{
"name": "vite-electron",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron:start": "electron ." // 这⾥
},
...
}
以上就是所有的代码了。
最后在终端中执⾏： npm run electron:start 命令，然后就能看到：
桌⾯程序终于完成了，很简单吧～
写在最后
近期在提升 Vue 的过程中，发现⼀个⾼逼格的 Vue3+TS 教程。⽆偿分享给掘仔们，
到此这篇关于构建Vue3桌⾯应⽤程序的⽅法的⽂章就介绍到这了，更多相关Vue3桌⾯应⽤程序内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。