在「vite.config.ts」中配置vite-plugin-electron插件入口 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron({ // 主进程入口文件 entry:...
(3) 在electron/index.js下配置窗口基本信息 注意:静态页面index.html,因为index页面是我们加载main.js,配置全局引用的地方,所以在打包的时候需要把index.html进行保留,这个会在打包时候标注 5. 配置路由 安装引入依赖 npm install vue-router (1) 将app.vue内容删除,补充router-view (2) 注意:<template><router...
创建成功之后有三个指令cd mangoUI和yarn install,yarn dev依次执行,项目创建成功。 注意:使用vscode打开最好安装一个插件:Vue 3 snippets,方便模板建立。 三、配置路由router (1)、查看所有路由版本: npm info vue-router versions 查看路由版本 与Vue3目前搭配的路由版本vue-router>=4.0.0 (2)、安装路由(vue-...
新项目中单由选用了 vue-i18n 现代化,适用汉语|繁体字|英语三种语言表达。 现阶段vue-i18n软件适用vue3新项目了,大伙儿需安裝最新版就可以。 code npm i vue-i18n@next -D 如上图所述:新创建locale文件目录用于解决相对应控制模块语言表达配备。 code import { createI18n } from "vue-i18n" import Storage ...
electron+vite桥接插件:vite-plugin-electron^0.28.7 vite5-electron-admin内置4种通用布局模板,支持i18n国际化、动态路由权限,整合了表格、表单、图表、列表、编辑器等业务模块。 项目框架目录 整个项目采用vue3 setup语法编码,整合vite.js+electronjs跨平台技术。
增加serve启动脚本,用于单独启动 Electron "scripts": {"dev":"vite","serve":"electron ."} 创建electron目录,编写主进程main.js 创建主窗口 加载Vue 页面 import{ app, BrowserWindow }from'electron'importpath, { dirname }from'node:path'import{ fileURLToPath }from'node:url'importisDevfrom'electron-is...
【win&mac】30分钟学会Vite创建和打包Electron+Vue3,前端跨平台桌面应用零基础入门教程【2024新版ESM规范】共计6条视频,包括:1.基于 Vite 创建 Vue3 项目、2.安装和配置 Electron、3.兼容 mac等,UP主更多精彩视频,请关注UP账号。
npm init electron-app@latest my-new-app -- --template=vite 1. Vue3 添加vue依赖 复制 npm install--save vue 1. 修改Vite配置 脚手架生成的Vite配置文件有三个,分别是vite.main.config.mjs、vite.reload.config.mjs和vite.renderer.config.mjs。这里修改vite.renderer.config.mjs如下。
帮助文档:简介 | Electron TypeScript中文网 Vite Vue3js 1、关于开发环境启动后,窗体程序没有自动启动的问题 因为设置的端口没有触发main.js中设置的是3000,在vite.config.ts中也设置成3000就可以解决 2、关于json文件的读取 1)使用axios请求读取:axios.get("./site_data.json") ...
在Electron-Vite项目中配置Vue Router,可以按照以下步骤进行。这些步骤将帮助你理解Electron-Vite项目的基本结构,配置Vue Router以支持项目的路由需求,并在项目中测试配置是否生效。 1. 确定Electron-Vite项目的基本结构 Electron-Vite项目通常包含以下基本结构: text my-electron-vite-project/ ├── dist/ # 打包后的...