1. 安裝vue-cli3（這裏使用的是yarn，進行這一步的前提是安裝好node和yarn）
yarn global add @vue/cli
vue --version （此命令意在查看vue的版本，可確認是否安裝成功，）
2. 創建vue項目
vue create vue-electron-demo （vue-electron-demo是你要創建的項目名稱）
3 . 創建vue項目過程，選常用模塊以及配置
此時需要選擇項目的一些配置，選定敲回車，出現的順序以及基本選擇如下：（**上下鍵，空格是選擇，enter是確定**）
? Please pick a preset: (Use arrow keys)
default (babel, eslint)———————（默認安裝，選擇它後項目將是默認配置）
> Manually select features——————（自定義安裝，選它後，後續又會出現你需要選擇的一些模塊）
選擇自定義安裝之後：(這裏選擇了常用模塊)
? Check the features needed for your project:
(*) Babel——————（轉碼器，將ES6代碼轉爲ES5代碼，從而在現有環境執行。 ）
( ) TypeScript——————（是JS（後綴.js）的超集，後綴爲.ts,包含並擴展了 JavaScript 的語法,現很少人用）
( ) Progressive Web App (PWA) Support————（漸進式Web應用程序）
(*) Router——————（vue-router 即vue路由）
(*) Vuex——————（vuex ,vue的狀態管理模式）
(*) CSS Pre-processors——————（ CSS 預處理器（如：less、sass））
(*) Linter / Formatter——————（代碼風格檢查和格式化（如：ESlint））
>( ) Unit Testing——————（單元測試）
( ) E2E Testing————————（/e2e（end to end） 測試）
選好後敲回車：
? Use history mode for router? (Requires proper server setup for index fallback in production)
(Y/n)———————— n （是否採用history模式，這裏對vue-router，vue-router 默認使用hash模式，可參考vue-router的官網， ）
我們不採用history模式，敲“n”，回車：
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)————（這裏選css預處理，一般項目用scss,這裏選了第二個）
Less
Stylus
eslint代碼格式化檢查工具的配置：
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config——————（這裏選，標準配置）
ESLint + Prettier
何時進行 進行格式檢查：
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save——————（在保存代碼的時候，檢查代碼格式）
( ) Lint and fix on commit
將babel、eslint等的配置文件放在哪裏：
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files （這裏選了放在各自專用的配置文件中）
In package.json——————（放在package.json裏）
是否記錄，這一次的配置選擇：
? Save this as a preset for future projects? (y/N)———— (N不記錄)
安裝後移動到目錄 並啓動：
選擇後敲回車，開始創建項目，創建完成後，根據提示，輸入命令，運行項目：
cd vue-electron-demo——————（該命令是進入項目目錄下）
yarn serve——————（運行項目）
**項目運行成功：**出現 http://localhost:8080等，可在瀏覽器打開 http://localhost:8080 。 到此vue的項目搭建完成。
效果如圖：
注意：
項目搭建完成後，sass已可用,ESLint也已生效；
4. 搭建好vue的項目後，自動安裝electron
在命令行 Ctrl+c, 結束項目運行終止批處理操作嗎(Y/N)? Y;
項目根部運行命令：
vue add electron-builder——————（安裝electron）
配置選項，選擇Electron的版本
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
> ^6.0.0——————（這裏選擇electron的6.0版本）
安裝完成後，查看項目的目錄結構，會自動在src目錄下生成background.js並修改了package.json。
運行項目：
yarn electron:serve————————（運行項目）
運行成功後，可看到如圖所示效果：
編譯成功後，就會出現開發環境的APP了。接下來就是改配置，進行開發。
5. 開發完成後，打包：
在項目根目錄下運行以下命令：
yarn electron:build——————（打包的命令）
小tip：
① 打包完成後，項目下會多出一個dist_electron的文件夾，該文件夾下有一個**.exe**的應用程序安裝包，雙擊可進行安裝（可發給別人安裝）， 因爲這裏沒有進行配置，會是默認的安裝路徑 （C盤），並會在桌面創建一個該程序的快捷方式。
② （dist_electron\win-unpacked）此下有一個無須安裝的綠色版本，故也可將win-unpacked整個發給別人安裝。
如圖，雙擊該 .exe 的文件：
將安裝該 .exe 應用程序，此時能看到桌面多了一個該應用程序的圖標，雙擊該圖標可看到上述運行的效果，
這裏在GitHub上傳了一個初步搭建的Vue+Electron的項目供參考，該項目會用於做一些測試的小案例，持續更新; 地址：https://github.com/ddx2019/vue-electron-demo