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
标签: