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
创建项目（cmd下执行命令）
vue create 项目名称
配置方式
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
第一个选项是 “default” 默认，只包含babel和eslint
第二个选项是 “default” 默认vue3.0
第三个选项是 “Manually select features”自定义安装
这里选择
手动选择特性
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
说明：
Babel： Babel编译
TypeScript：TypeScript支持
Progressive Web App (PWA) Support： PWA支持
Router： Vue路由
Vuex： Vue状态管理
CSS Pre-processors： CSS预编译器（包括：SCSS/Sass、Less、Stylus）
Linter / Formatter： 代码检测和格式化
Unit Testing： 单元测试
E2E Testing： 端到端测试
这里选择上图勾选的项。
选择版本
? 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预编译器,我们选择的是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
这里是设置css预处理模块，选择我们熟悉的一种
选择ESLint代码检查工具的配置，这里我们选择标准配置“ESLint + Standard config”
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
选择代码检测，我们选择的是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
说明：
Lint on save： 在保存时进行检测
Lint and fix on commit： 在fix和commit是进行检查
选择 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
说明：
In dedicated config files： 单独保存在各自的配置文件中
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
进入项目根目录（项目名称），然后执行下列命令：
vue add electron-builder
这个时候会安装electron-builder的依赖，可能比较耗费时间，请大家耐心等待，安装完成后会出现以下选型：
? Choose Electron Version (Use arrow keys)
^10.0.0
^11.0.0
❯ ^12.0.0
这一步是选择Electron的版本，我们这里选择最新版本12.0.0，等待安装完成即可。安装完成后会在src目录下生成background.js，并在package.json 文件中修main为"main": "background.js"
1.4 运行程序
执行以下命令，运行程序
npm run electron:serve
编译成功后，会自动弹出一个桌面程序，如下图所示
