为什么80%的码农都做不了架构师？>>>

背景

最近Easyui释放出了vue版本，尝试一波。

vue cli3

cli的全称是command-line interface，即命令行界面，简而意之vue cli就是vue的命令行界面版本。这里假设你已经安装好了npm（全称 Node Package Manager），npm是nodejs的包管理器。vue的cli需要依赖npm来安装。

npm install -g @vue/cli

安装成功后，验证一下vue：

vue --version

创建vue工程

vue create hello-world

设置vue工程

Vue CLI v3.0.3
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features

这里选择手动选择功能，即Manually select features；

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

这里选择了

Babel：JavaScript的编译器。
PWA：渐进式网络应用程序（英语：Progressive Web Apps，简称：PWA）是一种普通网页或网站架构起来的网络应用程序，但它可以以传统应用程序或原生移动应用程序形式展示给用户。这种应用程序形态视图将目前最为现代化的浏览器提供的功能与移动设备的体验优势相结合。
Vue Router：Vue Router 是 Vue.js 官方的路由管理器。
Vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
CSS Pre-processors：css 预处理器。
Linter / Formatter：用来标记源代码中有疑义段落的工具和格式化工具。

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-
processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) Y

HTML5 History 模式选择默认的Yes。

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-
processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): 
  Sass/SCSS 
❯ Less 
  Stylus

Css的预处理器选择Less。

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-
processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Less
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier

代码标记和格式化，选择ESLint + Prettier。

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-
processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit