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

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

背景

结合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

  1. 添加vue依赖
npm install --save vue
  1. 修改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',
        }
      }
});
  1. index.html中加入注入口
DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vite + Vuetitle>

  head>
  <body>
    <div id="app">div>
    <script type="module" src="/src/renderer/main.js">script>
  body>
html>
  1. 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

一站式解决方案!Electron、Vite和Vue 3助你打造功能丰富桌面应用_第1张图片
一站式解决方案!Electron、Vite和Vue 3助你打造功能丰富桌面应用_第2张图片

应用打包

npm run make

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

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

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

开发过程的问题

问题1

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',
        }
      }
});

问题2
一站式解决方案!Electron、Vite和Vue 3助你打造功能丰富桌面应用_第4张图片
在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

你可能感兴趣的:(electron,java,前端框架,webpack,uni-app,vue,前端)