该博客介绍了如何使用electron-vue搭建桌面应用项目，包括基础的项目结构、使用vue-cli作为脚手架、预装的Vue插件、开发工具以及预设的NPM脚本。还提到了支持模块热更新、ES6语法、预处理器和自动化部署选项，同时包含了单元测试和端到端测试的框架。
概要
项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。
在
这里 查看其文档。
你会在本样板代码中找到的东西...
- 基本的项目结构与 单一的package.json 设置
- 详细的 文档
- 使用 vue-cli 作为项目脚手架
- 立即可用的 Vue 插件 (axios, vue-electron, vue-router, vuex)*
- 预装开发工具 vue-devtools 和 devtron
- 使用 electron-packager 或 electron-builder 轻松打包你的应用程序*
- appveyor.yml 与 .travis.yml 配置用于 electron-builder 的自动部署*
- 能够生成用于浏览器的网页输出
- 便利的 NPM 脚本
- 使用携带模块热更新 (Hot Module Replacement) 的 webpack 和 vue-loader
- 在工作在 electron 的 main 主进程时重启进程
- 支持使用 vue-loader 的 HTML/CSS/JS 预处理器
- 默认支持 stage-0 的 ES6
- 使用 babili 避免完全反编译到 ES5
- ESLint (支持 standard 和 airbnb-base)*
- 单元测试 (使用 Karma + Mocha)*
- 端到端测试 (使用 Spectron + Mocha)*
* 在vue-cli脚手架中可定制
起步
该样板代码被构建为
vue-cli 的一个模板，并且包含多个选项，可以自定义你最终的脚手架程序。本 项目需要使用 node@^7 或更高版本。electron-vue 官方推荐
yarn 作为软件包管理器，因为它可以更好地处理依赖关系，并可以使用 yarn clean 帮助减少最后构建文件的大小。
具体操作如下
vue init simulatedgreg/electron-vue myproject
项目名称
? Application Name (myproject)
【输入名称或者点击enter】
？Application Name myproject
项目说明
? Project description（An electron-vue project）【
输入名称或者点击enter】
? Project description An electron-vue project
选择要安装的Vue插件(按<space>选择，<a>切换所有，<i>切换选择)
？Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) axios
(*) vue-electron
(*) vue-router
(*) vuex
【点击enter】
选择安装axios、vue- electronic、vue-router、vuex的vue插件
？Select which vue plugins to install axios, vue-electron, vue-router, vuex
是否添加ESlint (虽然加上eslink总是报错，但是eslint写出来的代码整体感觉还是非常不错的)
？Use linting with ESLint ?（Y/n）
【输入Y或者N，再点击enter】
？Use linting with ESLint No
? Set up unit testing with karma + mocha ? (Y/n)
【输入Y或者N，再点击enter】
？Set up unit testing with karma + mocha Yes
使用Spectron + Mocha 建立端到端测试
? set up end-to-end testing with Spectron + Mocha ? (Y/n)
【输入Y或者N，再点击enter】
? set up end-to-end testing with Spectron + Mocha Yes
您希望使用什么构建工具?(用箭头键)
? What build tool would you like to use ? (Use arrow keys)
【输入enter确定】
> electron-builder (
https://github.com/electron-userland/electron-builder)
electron-packager (
https://github.com/electron-userland/electron-packager)
? What build tool would you like to use ? builder
author (github地址)(地址可以没有)
? author (LJH95224 <991538766@qq.com>)
【输入enter确定】
? author LJH95224 <991538766@qq.com>
实际操作
现在只是创建项目完成了，下面需要安装依赖并运行你的程序
安装依赖 yarn # 或者 npm install
运行程序 yarn run dev
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
