electron+vue+ts+less构建多页面项目

一.安装node环境

下载地址: http://nodejs.cn/download/

二.安装vue-cli3 

全局安装

　　npm install -g @vue/cli

三.创建vue-cli项目

vue create project

Vue CLI v4.5.11
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features   // 手动选择

? Check the features needed for your project:
 (*) Choose Vue version // 选择vue版本
 (*) Babel
 (*) TypeScript // 使用ts
 ( ) Progressive Web App (PWA) Support // 支持web App
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors // css 预处理
 (*) Linter / Formatter // 语法校验规范
 (*) Unit Testing // 单元测试
 (*) E2E Testing   // e2e测试

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x // 稳定vue2
  3.x (Preview) 

? Use class-style component syntax? (Y/n) y// 使用class编码风格的组件

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes // 使用Babel与TypeScript一起用于自动检测的填充 ?

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) // 使用history模式的路由

? 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预处理器

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
> ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated) // 不建议
// 选择代码风格格式化方案

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存时检查代码格式
 ( ) Lint and fix on commit

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai // 单元测试方案  我选择这个
  Jest   
//   关于对比可以参考https://www.cnblogs.com/yaokai729/p/11468537.html

? Pick an E2E testing solution: (Use arrow keys)
> Cypress (Chrome only) // e2e测试方案，因为是electron项目，此处直接选择了这个
  Nightwatch (WebDriver-based)
  WebdriverIO (WebDriver/DevTools based) 

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 配置我习惯放在不同的文件中
  In package.json

? Save this as a preset for future projects? (y/N)  // 保存当前配置给未来的项目使用

  cd project

  vue add electron-builder

? Choose Electron Version
  ^9.0.0
  ^10.0.0
> ^11.0.0  

? Add tests with Spectron to your project? Yes //