用用vue-cli3+Electron开发一个跨平台的桌面应用（这里只是搭开发一个跨平台的桌面应用（这里只是搭
建了项目）建了项目）
## 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 to select, to toggle all, 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的项目搭建完成。
评论0