本系列文章將介紹electron-vue前端框架的作用、結構、使用方法。

electron-vue是SimulatedGREG基於vue-cli搭建的Vue+Webpack+Electron腳手架，可以用來開發跨PC平臺的應用，原始碼地址在這裡。
其主要功能/特色包括：

• 主程序和渲染程序配置檔案分離
• 程式碼熱更新
• 詳細的Log輸出
• 除了必備的Electron、Vue、Webpack等外掛外，還可以一鍵配置：Axios\Vue-router\Vuex\Eslint\等外掛

由於其自帶的說明檔案僅僅說明了該專案的概要、使用方法，並沒有整個結構的解釋，本系列文章就來從原始碼角度分析這個腳手架如何管理程式碼、如何分離編譯環境、如何進行熱更新等問題

1.下載架構模板

由於electron-vue基於vue-cli進行了二次封裝，因此在使用之前，需要先安裝vue-cli的腳手架：

npm install -g vue-cli

然後初始化electron-vue的專案：

vue init simulatedgreg/electron-vue my-project

然後在專案根目錄下使用npm或yarn安裝依賴即可使用：

cd my-project
yarn # or npm install
yarn run dev # or npm run dev

2.程式碼結構

我們先來看一下原始版的程式碼結構：

從這個結構中可以看到該框架下的檔案大致可以分為四個部分：

• webpack配置檔案
• 生成目錄&依賴目錄
• 原始碼目錄
• 全域性配置檔案

我們將在以下幾個小節我們分別來介紹他們的作用：