**注意**: 某些文件或文件夹可能会根据 `vue-cli` 脚手架中选择的设置而有所不同。

**来自** [**Electron 文档**](http://electron.atom.io/docs/tutorial/quick-start/#main-process)

由于 `main` 进程本质上是一个完整的 node 环境，所以除了以下两个文件之外，没有初始的项目结构。

这个文件是你应用程序的主文件，`electron` 也从这里启动。它也被用作 `webpack` 的产品构建的入口文件。所有的 `main` 进程工作都应该从这里开始。

这个文件是专门用于开发阶段，因为它会安装 `electron-debug` 与 `vue-devtools`。一般不需要修改此文件，但它可以用于扩展你开发的需求。

由于 `main` 进程是使用 `webpack` 绑定的，所以使用 `__dirname` 和 `__filename` **将不会** 在产品阶段提供一个预期的值。参考 [**文件树**](/file-tree.md)，你会注意到，在产品阶段，`main.js` 被放在了 `dist/electron` 文件夹里面。应根据此点相应地使用 `__dirname` 和 `__filename`。

**如果您需要 `static/` 资源目录的路径，请务必阅读** [**使用静态资产**](/using-static-assets.md) **学习了解非常方便的 `__static` 变量。**

当涉及制作 electron 应用程序时，项目结构会有些不同。如果你以前使用过官方的设置 [`vuejs-templates/webpack`](https://github.com/vuejs-templates/webpac)，那么这个结构应该感觉起来很熟悉。本文档在此章节将尝试解释样板代码的工作原理以及应用程序在构建中的区别。

就在不久之前，两个 `package.json` 的设置是必需的，但是由于 [@electron-userland](https://github.com/electron-userland) 的努力，[`electron-packager`](https://github.com/electron-userland/electron-packager) 和 [`electron-builder`](https://github.com/electron-userland/electron-builder) 现在完全支持单一的 `package.json` 设置。

这些依赖项 **将会被** 包含在你的最终产品的应用程序中。所以如果你的应用程序需要某个模块才能运行，那么请在此安装！

这些依赖项 **不会被** 包含在你的最终产品的应用程序中。在这里，你可以安装专门用于开发的模块，如构建脚本、`webpack` 加载器等等。

我们需要确保我们本地的 npm 模块是针对 electron 构建的。为了做到这一点，我们可以使用 [`electron-rebuild`](https://github.com/electron/electron-rebuild)，但是为了使事情更简单，强烈建议使用 [`electron-builder`](https://github.com/electron-userland/electron-builder) 作为你的构建工具，因为它会为你处理很多任务。

在开发过程中，你可能会注意到 `src/main/index.dev.js`。该文件专门用于开发以及安装开发工具。该文件原则上不应该被修改，但是可以用来扩展你的开发需求。在构建的过程中，`webpack` 将介入其中并创建一个以 `src/main/index.js` 作为入口文件的捆绑。

**来自** [**Electron 文档**](http://electron.atom.io/docs/tutorial/quick-start/#renderer-process)

如果你不熟悉 Vue 组件，请阅读 [此处](http://vuejs.org/v2/guide/single-file-components.html)。组件的使用使我们的大型复杂应用程序更加有组织化。每个组件都有能力封装自己的 CSS、模板 和 JavaScript 功能。

组件存储在 `src/renderer/components` 中。创建子组件时，一个常用的的组织化实践是将它们放置在一个使用其父组件名称的新文件夹中。在协调不同的路由时，这一点特别有用。

有关 `vue-router` 的更多信息请点击 [这里](https://github.com/vuejs/vue-router)。 简而言之，我们鼓励使用 `vue-router`，因为创建 单页应用程序 (Single Page Application) 在制作 electron 应用程序的时候更加实用。你真的想管理一堆 BrowserWindows，然后在之间传达信息吗？恐怕不会。

在使用 `vue-router` 时，不要使用 [**HTML5 历史模式**](http://router.vuejs.org/en/essentials/history-mode.html)。 此模式严格用于通过 `http` 协议提供文件，并且不能正常使用 `file` 协议，electron 在产品构建中提供文件。 默认的 `hash` 模式正是我们所需要的。

拥有多个数据存储对于组织化来说可能很好，但必须导入每一个数据也可能令人厌烦。但是不要担心，因为 `src/renderer/store/modules/index.js` 对我们来说是麻烦的工作！这个小脚本让 `src/renderer/store/index.js` 以一次性的方式导入我们所有的模块。如果所有这些都没有，只要知道你可以轻松地复制给定的 `Counter.js` 模块，它将以 "神奇" 的方式被加载进来。

electron-vue 包含三个单独的、位于 `.electron-vue/` 目录中的 webpack 配置文件。除了可选使用 `web` 输出以外，`main` 和 `renderer` 在安装过程中都是相似的。两者都使用 `babel-preset-env` 来针对 `node@7` 的功能特性、使用`babili`、并把所有的模块都视为 `externals`。

针对 electron 的 `main` 进程。这种配置是相简陋的，但确实包括一些常见的 `webpack` 做法。

针对 electron 的 `renderer` 进程。此配置操控你的 Vue 应用程序，因此它包含 `vue-loader` 和许多其他可在官方 `vuejs-templates/webpack` 样板中找到的配置。

关于这个配置的一个重要的事情是，你可以将特定的模块列入白名单，而不是把它视为 webpack 的 `externals`。并没有很多情况需要这个功能，但是对于提供原始的 `*.vue` 组件的 Vue UI 库的情况，他们需要被列入白名单，所以 `vue-loader` 能够编译它们。另一个使用情况是使用 webpack 的 `alias`，例如设置 `vue` 来导入完整 编译+运行环境 的构建。因此，`vue` 已经在白名单中了。

针对为浏览器构建你的 `renderer` 进程源代码。如果你需要把代码发布到网上，则此配置是其强大的起步基础。 **electron-vue 不支持更多其他的 Web 输出。** 与 Web 输出相关的 Issues 有很大的可能被推迟或关闭。