vue-cli3.0 开发环境构建

vue-cli3.0官网

1、node版本

node版本要求node>=8.9以上(推荐 8.11.0+)
使用以下命令查看node版本

node -v

如果不是最新的请到node下载下载最新版本安装即可。

2、vue-cli安装

（1）若已全局安装vue-cli (1.x 或 2.x)，需先卸载

npm uninstall vue-cli -g

（2）全局安装 vue-cli3.0

npm install -g @vue/cli

3、创建项目

（1）创建项目

vue create 项目名

（2）配置

// 默认预设配置 babel, eslint
default (babel, eslint)
// 手动选择配置
Manually select features

（3）手动选择配置项目

Vue CLI v3.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support //支持渐进式网页应用程序
 ( ) Router //路由管理器
 ( ) Vuex //状态管理模式（构建一个中大型单页应用时）
 ( ) CSS Pre-processors //css预处理
 (*) Linter / Formatter //代码风格、格式校验
 ( ) Unit Testing // 单元测试
 ( ) E2E Testing // 即端对端测试

• 上下键：自由选择配置项
• 空格：选中
• enter：全部选择完毕之后按下执行

（4）enter后，Installed CLI Plugins配置细节

//1、 TypeScript
// 是否使用class风格的组件语法
Use class-style component syntax?
// 是否使用babel做转义
Use Babel alongside TypeScript for auto-detected polyfills?

// 2、Router
// 路由使用历史模式
Use history mode for router? (Requires proper server setup for index fallback in production) 

// 3、CSS Pre-processors css预处理
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

// 4、Linter / Formatter 代码风格、格式校验
> TSLint
  // 仅错误预防
  ESLint with error prevention only
  //  Airbnb配置
  ESLint + Airbnb config
  // 标准配置
  ESLint + Standard config
  // Prettier配置（常用）
  ESLint + Prettier

// 5、选择lint方式：Pick additional lint features
// 保存时检查（常用）
(*) Lint on save
// 提交时检查
( ) Lint and fix on commit

// 6、Unit Testing 单元测试
Mocha + Chai
Jest

// 7、E2E Testing E2E（End To End）即端对端测试
Cypress (Chrome only) 
Nightwatch (Selenium-based)

// 8、选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
// 在单独的配置文件中
In dedicated config files
// 在package.json
In package.json

// 9、将此作为将来项目的预置吗？
Save this as a preset for future projects?
// 在单独的配置文件中
In dedicated config files
// 在package.json
In package.json

// 10、按下enter构建项目

4、启动项目

// 1、进入项目
cd 项目名

 // 2、运行
npm run serve