electron-vue开发，介绍
开发
开始开发环境设置
在你使用yarn 或者npm install 安装依赖之后，运行.....
yarn run dev # (yarn run dev) 或者 npm run dev
此样板代码附带了几个易于移除的登录页面组件。
入口
在产品阶段，electron-vue 使用 html-webpack-plugin 创建 index.html。在开发过程中，你将在 src/ 目录中找到一个 index.ejs。在这里，你可以更改 HTML 入口文件。
如果你不熟悉这个插件的工作原理，那么我鼓励你看看它的 文档。简而言之，这个插件会自动将产品阶段的资源（包括 renderer.js 和 styles.css）注入到最终压缩版的 index.html 中。
开发阶段的 index.ejs
产品阶段的 index.html (非压缩版)
关于 CDNs 的使用
虽然使用 CDN 提供的资源有益于你的应用程序的最终版本的大小，但我建议不要使用它们。主要原因是，通过这样做，你其实是在假设你的应用程序始终可以访问互联网，而 Electron 应用程序并不总是如此。这成为使用 CSS 框架（如 bootstrap）的一个相当重要的问题，因为没有互联网，你的应用程序将迅速变得没有任何样式并且乱七八糟。
“我不在乎，我还是想用CDN。”
如果你坚持使用 CDN，那么你仍可以通过将标签添加到 src/index.ejs 文件中达到目的。只是当你的应用程序处于离线模式时，请确保设置适当的 UI/UX 流程。
Vue插件
electron-vue 包含以下 vue 插件，可以使用 vue-cli 脚手架安装...
- axios(网络请求)
- vue-electron (将 electron API 附加到 Vue 对象)
- vue-router (单页应用路由)
- vuex (flux 启发的应用程序架构)
axios（基于 Promise，用于浏览器和 node.js 的 HTTP 客户端）
如果你熟悉 vue-resource，那么你也会觉得 axios 并不陌生，因为大部分 API 几乎是一样的。你可以在 main 进程脚本中轻松导入 axios，或者在 renderer 进程中使用 this.$http 或 Vue.http。
vue-electron（将 electron API 附加到 Vue 对象的 vue 插件，使所有组件可以访问它们。）
一个可以轻松通过 this.$electron 访问 electron API 的简单的 vue 插件，不再需要将 electron 导入到每一个组件中。
vue-router（vue-router 是 Vue.js 的官方路由。它与 Vue.js 的核心深度整合，使 Vue.js 单页应用程序的构建变得轻而易举。）
本项目所提供的项目结构应该与官方样板 vuejs-templates/webpack 中提供的设置很相似。
vuex（Vuex 是 Vue.js 应用程序的 状态管理模式 + 库。它作为程序中所有组件的集中存储，其规则确保了状态量只能以可预测的方式被改变。）
本项目所提供的项目结构相当简单，但我们鼓励使用 vuex 的模块模式来帮助组织你的数据存储。外加的 @/store/modules/index.js 让你的 vuex 存储能够一次性导入所有的模块。
NPM脚本
为了帮助n你消除开发过程中的冗余任务，请注意一些可用的 NPM 脚本。以下命令应该运行在项目的根目录下。当然，你可以使用 yarn run
npm run build
为了产品和打包来构建你的应用程序。更多信息可以在 构建你的应用程序 部分找到。
npm run dev
在开发环境中运行程序
npm run lint
静态分析所有在 src/ 和 test/ 下面的 JS 以及 Vue 组件文件。
npm run lint:fix
静态分析所有在 src/ 和 test/ 下面的 JS 以及 Vue 组件文件并且尝试修复问题。
npm run pack
同时运行 npm run pack:main 和 npm run pack:renderer。 虽然这些命令是可用的，但很少情况下，你需要手动执行此操作，因为 npm run build 将处理此步骤。
npm run pack:main
运行 webpack 来打包 main 进程的源代码。
npm run pack:renderer
运行 webpack 来打包 renderer 进程的源代码。
npm run unit
运行使用了 Karma + Jasmine 的单元测试。更多信息请见 单元测试。
npm run e2e
运行使用了 Spectron + Mocha 的端对端测试。更多信息请见 端对端测试。
npm test
运行 npm run unit 和 npm run e2e. 更多信息请见 测试。
CSS框架的使用
虽然这可能看起来并不明智，但我建议你使用 style-loader 将第三方 CSS 库导入 webpack，其实这一点我们已经为你做了。
使用案例
假设你要为你的程序使用 bootstrap、bulma 或者 materialize。你可以仍旧像通常情况下一样，从 npm 安装你的库，而不是将资源附加到 index.ejs 上，我们将在我们的 JavaScript 中导入 CSS，具体在 src/renderer/main.js 中。
例子：
让我们安装 bulma 如下
然后，在 src/renderer/main.js 里面加入这一行：
替代方案是, 你也可以在你的组件文件中引用 bulma。
现在，webpack 会为我们的应用程序加载 bulma，并使其在产品构建中可用.
预处理器的使用
将 vue-loader 与 webpack 一起使用的好处之一是能够直接在你的 Vue 组件文件中预处理你的 HTML/CSS/JS，而无需其他工作。请查询 这里 相关的详细信息。
使用案例
假设我们需要使用 Sass/SCSS 来预处理我们的 CSS。首先，我们需要安装正确的 webpack 加载器来处理这种语法。
安装sass-loader
一旦安装了我们需要的加载器，一切就都差不多完成了。vue-loader 将神奇地做好其余的工作。现在我们可以轻松地将 lang="sass" 或 lang="scss" 添加到我们的 Vue 组件文件中。注意，我们还安装了 node-sass，因为它是 sass-loader 的依赖包。
相同的原理适用于任何其他预处理器。那么，也许你的 JS 需要 coffeescript？只需安装 coffeescript-loader，并将属性 lang=“coffeescript” 应用到你的