Node 版本要求：Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)
admin@admindeMacBook-Pro ~ % node -v
v14.8.0
安裝腳手架
npm install -g @vue/cli
查版本是否正確 (4.x)：
@vue/cli 4.5.7
官方安裝文檔：https://cli.vuejs.org/zh/guide/installation.html
創(chuàng)建項(xiàng)目（cmd下執(zhí)行命令）
vue create 項(xiàng)目名稱
配置方式
Vue CLI v4.5.7
┌─────────────────────────────────────────────┐
│ │
│ New version available 4.5.7 → 4.5.13 │
│ Run yarn global add @vue/cli to update! │
│ │
└─────────────────────────────────────────────┘
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
? Manually select features
第一個(gè)選項(xiàng)是 “default” 默認(rèn)害晦，只包含babel和eslint
第二個(gè)選項(xiàng)是 “default” 默認(rèn)vue3.0
第三個(gè)選項(xiàng)是 “Manually select features”自定義安裝
這里選擇
手動(dòng)選擇特性
Vue CLI v4.5.7
┌─────────────────────────────────────────────┐
│ │
│ New version available 4.5.7 → 4.5.13 │
│ Run yarn global add @vue/cli to update! │
│ │
└─────────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project:
? Choose Vue version
? Babel
? TypeScript
? Progressive Web App (PWA) Support
? Router
? Vuex
?? CSS Pre-processors
? Linter / Formatter
? Unit Testing
? E2E Testing
說(shuō)明：
Babel： Babel編譯
TypeScript：TypeScript支持
Progressive Web App (PWA) Support： PWA支持
Router： Vue路由
Vuex： Vue狀態(tài)管理
CSS Pre-processors： CSS預(yù)編譯器（包括：SCSS/Sass、Less次绘、Stylus）
Linter / Formatter： 代碼檢測(cè)和格式化
Unit Testing： 單元測(cè)試
E2E Testing： 端到端測(cè)試
這里選擇上圖勾選的項(xiàng)。
選擇版本
? Choose a version of Vue.js that you want to start the project with (Use arrow
keys)
? 2.x
3.x (Preview)
路由是否采用history,選擇y
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) y
采用css預(yù)編譯器,我們選擇的是Sass/SCSS (with node-sass)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default):
Sass/SCSS (with dart-sass)
? Sass/SCSS (with node-sass)
Less
Stylus
這里是設(shè)置css預(yù)處理模塊田炭，選擇我們熟悉的一種
選擇ESLint代碼檢查工具的配置杭跪，這里我們選擇標(biāo)準(zhǔn)配置“ESLint + Standard config”
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
? ESLint + Standard config
ESLint + Prettier
選擇代碼檢測(cè)二拐，我們選擇的是Lint on save
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
?? Lint on save
? Lint and fix on commit
說(shuō)明：
Lint on save： 在保存時(shí)進(jìn)行檢測(cè)
Lint and fix on commit： 在fix和commit是進(jìn)行檢查
選擇 Babel、PostCSS诅病、ESLint等配置文件存放位置哪亿，這里選擇 In dedicated config files
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
? In dedicated config files
In package.json
說(shuō)明：
In dedicated config files： 單獨(dú)保存在各自的配置文件中
In package.json： 保存在package.json文件中
是否記錄一下以便下次使用這套配置粥烁，這里選擇 N 不記錄，如果鍵入Y需要輸入保存名字
? Save this as a preset for future projects? (y/N) n
Vue-cli完成初始化
?? Initializing git repository...
?? Installing CLI plugins. This might take a while...
yarn install v1.22.4
info No lockfile found.
[1/4] ?? Resolving packages...
success Saved lockfile.
? Done in 21.94s.
?? Invoking generators...
?? Installing additional dependencies...
[-/5] ? waiting...
yarn install v1.22.4
[1/4] ?? Resolving packages...
[2/4] ?? Fetching packages...
[3/4] ?? Linking dependencies...
[4/4] ?? Building fresh packages...
success Saved lockfile.
? Done in 11.56s.
? Running completion hooks...
?? Generating README.md...
?? Successfully created project vue-electron-admin.
?? Get started with the following commands:
$ cd vue-electron-admin
$ yarn serve
使用electron-builder集成electron
進(jìn)入項(xiàng)目根目錄（項(xiàng)目名稱）蝇棉，然后執(zhí)行下列命令：
vue add electron-builder
這個(gè)時(shí)候會(huì)安裝electron-builder的依賴讨阻，可能比較耗費(fèi)時(shí)間，請(qǐng)大家耐心等待篡殷，安裝完成后會(huì)出現(xiàn)以下選型：
? Choose Electron Version (Use arrow keys)
^10.0.0
^11.0.0
? ^12.0.0
這一步是選擇Electron的版本钝吮，我們這里選擇最新版本12.0.0，等待安裝完成即可板辽。安裝完成后會(huì)在src目錄下生成background.js奇瘦，并在package.json 文件中修main為"main": "background.js"
1.4 運(yùn)行程序
執(zhí)行以下命令，運(yùn)行程序
npm run electron:serve
編譯成功后劲弦，會(huì)自動(dòng)彈出一個(gè)桌面程序耳标，如下圖所示
