先创建vue项目 npm create vite@latest electron-desktop-tool 进入到项目 执行安装和运行命令,可以看到vue项目已经启动起来了 cd electron-desktop-tool npm install npm run dev 项目可以在浏览器中跑起来,说明没毛病,下一步就在项目中引入 electron 目录结构 这是目前的目录结构 安装electron 在安装 electron之前需...
UI组件库:element-plus^1.0.2 (饿了么外卖vue3组件库) 报表拖动:sortablejs^1.13.0 图表组件:echarts^5.1.1 现代化计划方案:vue-i18n^9.1.6 数据信息仿真模拟:mockjs^1.1.0 二、关键特点 前端技术栈Vite2、Vue3、Electron12、Element Plus、Vue-i18n、Echarts5.x、Sortable、Mockjs。 管理权限验证适用部件...
unplugin-vue-components是一个用于Vue.js的插件,它允许你导入Vue组件,而不需要在你的代码中显式地导入它们。这个插件可以让你按需导入组件,从而减少初始加载大小。 unplugin-auto-import是一个用于Vue.js的插件,它可以自动导入Vue.js的相关API,如Vue自身,Vue的RFC(响应式),Composition API,以及其他一些常用的Vue功...
在渲染进程中我们使用@vueuse/electron 模块方便的进行主进程与渲染进程之间的通信,比如我们打开一个新窗口,可以像如下写法。 代码如下: <template> 打开新窗口 </template> import { useIpcRenderer } from "@vueuse/electron"; const ipcRenderer = useIpcRenderer(); const openNewWin = () => { ip...
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';importvuefrom"@vitejs/plugin-vue";// https://vitejs.dev/configexport...
5. 配置路由 安装引入依赖 npm install vue-router (1) 将app.vue内容删除,补充router-view (2) 注意:<template><router-view></router-view></template>外层套一层,如果没有会导致路由失效,具体原因忘记了 (3) 添加router.js,在里面配置路由 (5) 在main....
1.安装vite,创建vue3项目 npm init vite npm install npm run dev 2.vue项目中下载electron npm install electron -D 如果失败用下面的 npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install --save-dev electron 3.在main.js中加入代码 ...
Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 Vue3.4 至于标题特地指出Vue3.4版本,主要是新出的几个特性比较香,这里简单提一下 解析器速度提高 2 倍,SFC 构建性能提升,更高效的响应式系统 ...
◆ Vue3+Electron实现无边框导航条 如上图:顶部导航条均是自定义组件实现功能。同时支持自定义标题、背景及文字颜色等功能。 下拉菜单则是使用的element-plus中的Dropdown组件实现功能。 <template><WinBarbgcolor="rgba(29,29,32,.7)"color="#fff"zIndex="1000"title="false"><template#menu>...<el-dropdow...
electron-vite-vue开发桌面应用之配置路由router(五) 云风网 云风笔记 云风知识库 一、安装依赖 npm install vue-router 二、配置项目文件路径 三、配置路由router 在src下新建一个router目录,然后在里面添加一个index.ts文件,在里面配置路由 import { createRouter, createWebHashHistory } from 'vue-router'...