electron-vue项目搭建

electron-vue项目搭建

    • vue项目创建
      • 创建项目
      • 选择配置
      • 创建成功
      • 执行提示的运行指令
    • 构建 Electron 桌面应用程序
      • 需要安装 Vue CLI Plugin Electron Builder
      • 运行指令
  • 解决electron vue 项目中 Failed to fetch extension, trying 4 more times

假设你已有一定的基础,已安装好 Yarn、Node、Npm
这是当前我的nodejs和vue版本
electron-vue项目搭建_第1张图片
Electron 官方推荐 yarn 作为软件包管理器

vue项目创建

创建项目

vue create my-project

选择配置

electron-vue项目搭建_第2张图片

创建成功

electron-vue项目搭建_第3张图片

执行提示的运行指令

cd va600-device-client
yarn serve

electron-vue项目搭建_第4张图片
运行成功,此时是网页端
electron-vue项目搭建_第5张图片

构建 Electron 桌面应用程序

需要安装 Vue CLI Plugin Electron Builder

vue add electron-builder

选择electron版本
electron-vue项目搭建_第6张图片
安装成功啦
electron-vue项目搭建_第7张图片

运行指令

yarn run electron:serve

结果报错了
electron-vue项目搭建_第8张图片
参考了这篇文章:https://www.jianshu.com/p/9ae8d458e09e
在package.json中添加了 “ts-loader”: “^8.0.0” ,执行指令

yarn

electron-vue项目搭建_第9张图片
然后再运行

yarn run electron:serve

执行成功了
electron-vue项目搭建_第10张图片
electron-vue项目搭建_第11张图片
这样我就有了一个初始化的项目


解决electron vue 项目中 Failed to fetch extension, trying 4 more times

注释掉安装vue devtools的代码

app.on("ready", async () => {
  // if (isDevelopment && !process.env.IS_TEST) {
  //   // Install Vue Devtools
  //   try {
  //     await installExtension(VUEJS3_DEVTOOLS);
  //   } catch (e) {
  //     console.error("Vue Devtools failed to install:", e.toString());
  //   }
  // }
  createWindow();
});

你可能感兴趣的:(vue.js)