接下来,在你的electron-vue项目中的src/main/index.dev.js文件中,利用BrowserWindow.addDevToolsExtension(url)引入插件。 整个文件代码如下: 备注了new的为在原来的基础上新增的代码,此外还需要把'ready'中原来的代码注释掉 /*** This file is used specifically and only for development. It installs* `electron...
1.在浏览器输入chrome://extensions/,打开chrome浏览量的扩展程序,点击右上角的开发者模式,看到vue对应的id,如下图所示 2.打开谷歌浏览器的安装配置文件,找到开发者共vue的id对应下的manifest.json路径,取其父级复制到,复制下图所示红框内容 3.在electron主进程加载页面处添加如下代码 头部添加代码 const path = ...
git clone https://github.com/vuejs/vue-devtools.git cd vue-devtools npm install npm run build 然后把vue-devtools/packages/shell-chrome文件夹复制到项目根目录 ②在background.js文件的app.on('ready',生命周期中进行加载 代码语言:javascript 复制 // 使用本地的vue开发者工具session.defaultSession.loadE...
1. 安装 vue-cli; 命令行工具执行以下命令: npm install -g @vue/cli 安装完成,执行 vue --version 或 vue -V 可看到版本号即可: 安装vue-cli 2. 创建 vue 项目; 命令行工具执行以下命令: vue create electron-vue-learning 其中electron-vue-learning 是项目名,请自取。 选择项目配置,我们直接选择默认的...
一款专为开发者打造的强大工具应运而生。这款工具不仅支持代码片段管理,还具备Gist管理功能,它采用了Electron框架和Vue.js前端库构建而成,旨在为用户提供高效便捷的开发体验。用户可以通过访问链接详细了解该工具的功能与优势。 关键词 开发者工具, 代码片段, Gist管理, Electron应用, Vue.js构建 ...
// 使用本地的vue开发者工具session.defaultSession.loadExtension(path.resolve('shell-chrome'))复制代码 1. ③ 创建窗口的时候使用下面示例方法, 即可正常显示出vue开发者工具 // src/background.jsif (process.env.WEBPACK_DEV_SERVER_URL) { await transferWin.loadURL( ...
cd vue-devtools npm install npm run build 然后把vue-devtools/packages/shell-chrome文件夹复制到项目根目录 ②在background.js文件的app.on('ready',生命周期中进行加载 // 使用本地的vue开发者工具session.defaultSession.loadExtension(path.resolve('shell-chrome')) ...
// 使用本地的vue开发者工具session.defaultSession.loadExtension(path.resolve('shell-chrome'))复制代码 ③ 创建窗口的时候使用下面示例方法, 即可正常显示出vue开发者工具 // src/background.jsif (process.env.WEBPACK_DEV_SERVER_URL) { await transferWin.loadURL( process.env.WEBPACK_DEV_SERVER_URL +...
【Electron-Vue】入门学习笔记之三:创建自己的第一个 Electron 项目,上一节《搭建Node.js开发环境》我们安装了Node.js环境。这一节,我会带大家开发自己的第一个Electron项目。
第1行:为了管理您应用程序的生命周期事件,以及创建和控制浏览器窗口,您从electron软件包导入了app和BrowserWindow模块 。 第3 行:在此之后,您定义一个函数,该函数创建一个 新的浏览窗口 启用了节点集成,将index.html文件加载到此窗口中(第 12 行,稍后我们将讨论该文件),并打开开发人员工具(第 13 行)。