一站式解决方案!Electron、Vite和Vue 3助你打造功能丰富桌面应用

开发 前端
Vite的快速热更新能力和Vue 3的高效性能,加速了开发周期,使得开发者能够更快地迭代和测试应用。很多vue3的UI可以使用,例如本文选用的arco-design,这就是站在巨人肩膀之上。

背景

结合Electron Forge、Vite和Vue 3,你可以快速构建功能丰富的跨平台桌面应用程序,尽管你可能只懂web开发,你一样可以轻松的开发出各式各样的桌面应用。而且Vite的快速热更新能力和Vue 3的高效性能,加速了开发周期,使得开发者能够更快地迭代和测试应用。很多vue3的UI可以使用,例如本文选用的arco-design,这就是站在巨人肩膀之上。废话不多说,进入正题。本文的所有代码,已经上传github,如果使用,可以直接拿去。而且作者会持续更新它。

Electron+Forge+Vite

Electron Forge官方提供了一个脚手架,且自带Vite模版。

npm init electron-app@latest my-new-app -- --template=vite

Vue3

添加vue依赖

npm install --save vue

修改Vite配置

脚手架生成的Vite配置文件有三个,分别是vite.main.config.mjs、vite.reload.config.mjs和vite.renderer.config.mjs。这里修改vite.renderer.config.mjs如下。

import { defineConfig } from 'vite';
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
          'vue': 'vue/dist/vue.esm-bundler.js',
          'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
        }
      }
});

index.html中加入注入口

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vite + Vue</title>

  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/renderer/main.js"></script>
  </body>
</html>

renderer/main.js中加入启动代码

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';
import router from './router';

import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  legacy: false, // 如果你使用 Composition API(推荐),请将legacy设置为false
  locale: 'zh', // 默认语言环境
  messages: {
    en: {
      hello: 'Hello',
      welcome: 'Welcome to our app!',
    },
    zh: {
      hello: '你好',
      welcome: '欢迎来到我们的应用!',
    },
  },
});


createApp(App).use(i18n).use(router).use(ArcoVue,{}).use(ArcoVueIcon).mount('#app');

启动

在package.json中应该有如下配置,没有就加进去。

"scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\""
  },

在项目根目录下运行如下命令启动项目。

npm start

启动日志

应用页面

应用打包:

npm run make

打包后程序

点击intel-fun-app便可以启动应用。

本项目包含了国际化、路由的功能。之后会更新诸如状态保存,api调用等功能。

开发过程的问题

问题一

runtime-core.esm-bundler.js:38 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

在vite.renderer.config.js文件中配置resolve.alias。

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
          'vue': 'vue/dist/vue.esm-bundler.js',
        }
      }
});

问题二

问题描述

在vite.renderer.config.js文件中配置resolve.alias。

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
          'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
        }
      }
});

git代码地址:

https://github.com/dongluyang/intel-desktop-app.git。

责任编辑:姜华 来源: 今日头条
相关推荐

2010-05-06 16:02:26

2014-07-04 11:44:00

数字营销国双科技AdSuite

2013-06-14 09:30:52

2015-04-19 16:36:10

腾讯云

2013-12-12 15:34:00

Moneta移动支付一站式解决方案

2017-11-28 13:53:18

2015-02-02 11:06:21

cocos cocos一站式解决

2023-05-26 08:37:04

All in ECPES数据

2012-12-12 16:37:00

2011-04-22 10:15:43

一体机Gateway ZX4

2013-10-18 15:07:07

华为BYOD移动办公华为

2015-07-14 15:34:28

阿里云万网

2015-02-02 16:07:50

游戏开发

2019-05-29 14:12:02

腾讯To B计费

2013-10-23 10:58:07

友盟解决方案

2014-07-16 16:06:53

AdSuite解决方案数字营销洞察

2024-08-19 09:05:00

Seata分布式事务

2024-07-01 11:30:09

AI网关大模型安全
点赞
收藏

51CTO技术栈公众号