Vue 的 Electron 项目搭建

demo（项目名称）├─ .electron-vue（webpack配置文件）│ └─ build.js（生产环境构建代码） | └─ dev-client.js（热加载相关）│ └─ dev-runner.js（开发环境启动入口）│ └─ webpack.main.config.js（主进程配置文件）│ └─ webpack.renderer.config.js（渲染进程配置文件）│ └─ webpack.web.config.js├─ build（是文件打包使用的）│ └─ win-unpacked/│ │ ├─ locales（地区语言资源包）│ │ ├─ resources（地区语言资源包）│ │ ├─ *.dll（动态链接库）├─ dist(打包后的文件资源)│ ├─ electron| ├─ web├─ node_modules/（依赖目录）├─ src（源码）│ ├─ main(主进程)│ │ └─ index.dev.js（捆绑index.js）│ │ └─ index.js(主进程的进程JS)│ ├─ renderer（渲染进程）│ │ ├─ assets/（放置静态资源，如图片，视频，静态配置）│ │ ├─ components/（放置vue页面）│ │ ├─ router/（放置页面路由）│ │ ├─ store/（放置公共模块，如vuex）│ │ ├─ App.vue│ │ └─ main.js│ └─ index.ejs├─ static/（静态文件）├─ test│ ├─ e2e│ │ ├─ specs/│ │ ├─ index.js│ │ └─ utils.js│ ├─ unit│ │ ├─ specs/│ │ ├─ index.js│ │ └─ karma.config.js│ └─ .eslintrc#全局配置文件├─ .babelrc├─ .eslintignore├─ .eslintrc.js├─ .gitignore├─package.json└─ README.md

环境搭建

默认有 node 环境.

先安装 electron vue vue-cli，因为electron-vue 中有内置 webpack ，无需再装一个独立的webpack。

npminstall-g electronnpminstall-g vuenpminstall-g vue-cli

创建一个空文件夹，DOS命令窗口进入该文件夹位置，初始化一个 electron-vue 项目。

//使用vue-cli来安装electron-vue的模板vueinitsimulatedgreg/electron-vue demo

注：demo 是项目名称

安装依赖

npminstall

启动项目（开发环境）

npmrun dev

完成1~3步骤，一个基于 vue 的 electron 项目就初始化完成了。

启动项目后效果图如下：

正在上传... 取消

问题解决

初始化报错

当运行 npm init simulatedgreg/electron-vue demo 命令初始化项目时报错，大致意思说找不到 electron-vue 或者安装 create-electron-vue 等原因导致失败，可以选择重新运行命令多试几次，或者先下载electron-vue源码，然后生成自己的项目模板。下面说后者的步骤。

electron-vue 下载

cmd 切换到该项目根目录

初始化一个自己的项目。初始化完之后可以再命令对应的“目录路径”看到你的项目

vueinit 项目路径 项目名

深圳网站建设www.sz886.com