# 渲染器進程 > 由于 Electron 使用 Chromium 顯示網頁，那么，Chromium 的多進程架構也被使用。Electron 中的每個網頁都在自己的進程中運行，稱為渲染器進程 (renderer process)。 > > 在正常的瀏覽器中，網頁通常運行在沙盒封裝化的環境中，并且不允許訪問本機資源。然而，Electron 用戶有權在網頁中使用 Node.js 的 API，從而允許較低級別的操作系統交互。 **選自** [**Electron 文檔**](http://electron.atom.io/docs/tutorial/quick-start/#renderer-process) --- ## 關于 `vue` 和 `vuex` ### vue 組件 如果你不熟悉 Vue 組件，請閱讀 [此處](http://vuejs.org/v2/guide/single-file-components.html)。組件的使用使我們大型、復雜的應用程序更加有組織化。每個組件都有能力封裝自己的 CSS、模板 和 JavaScript 的功能。 組件存放在 `src/renderer/components` 里。創建子組件時，一個常用的組織化實踐是將它們放置在一個使用其父組件名稱的新文件夾中。在協調不同的路由時，這一點特別有用。 ``` src/renderer/components ├─ ParentComponentA │ ├─ ChildComponentA.vue │ └─ ChildComponentB.vue └─ ParentComponentA.vue ``` ### vue 路由 有關 `vue-router` 的更多信息請點擊 [這里](https://github.com/vuejs/vue-router)。 簡而言之，我們鼓勵使用 `vue-router`，因為創建 單頁應用程序 (Single Page Application) 在制作 electron 程序的時候更加實用。你真的想管理一堆 BrowserWindows，然后在其之間傳達信息嗎？恐怕不會。 路由被保存在 `src/renderer/router/index.js` 里并定義如下... ```js { path: '<routePath>', name: '<routeName>', component: require('@/components/<routeName>View') } ``` ... 其中 `<routePath>` 和 `<routeName>` 都是變量。然后，這些路由使用 `src/renderer/App.vue` 的 `<router-view>` 指令附加到組件樹上。 ##### 注意 在使用 `vue-router` 時，不要使用 [**HTML5 歷史模式**](http://router.vuejs.org/en/essentials/history-mode.html)。 此模式嚴格用于通過 `http` 協議提供文件，并且不能正常使用 `file` 協議，但是 electron 在產品構建中使用此協議提供文件。默認的 `hash` 模式正是我們所需要的。 ### vuex 模塊 描述 `vuex` 并不是簡單的事情，所以請閱讀 [這里](https://vuex.vuejs.org/zh/)，以便更好地了解它試圖解決的問題及其工作原理。 electron-vue 利用 `vuex` 的模塊結構創建多個數據存儲，并保存在 `src/renderer/store/modules` 中。 擁有多個數據存儲對于組織化來說可能很好，但你必須導入每一個數據，這也可能令人厭煩。但是不要擔心，因為 `src/renderer/store/modules/index.js` 對我們來說是麻煩的工作！這個簡單的腳本讓 `src/renderer/store/index.js` 一次性導入我們所有的模塊。如果所有這些都沒有，只要知道你可以輕松地復制給定的 `Counter.js` 模塊，它將以 "神奇" 的方式被加載進來。