Vue Cli 创建项目

一、CLI

全局安装的npm包 

vue create命令快速搭建一个新项目，vue server构建

vue ui 图形化界面管理项目

二、cli服务

CLI服务(@vue/cli-service)是一个开发环境依赖，一个npm包

本地安装在@vue/cli创建的每个项目中

三、CLI插件

四、Vue CLI安装

vue/cli 需要node.js 8.9或更高版本

** 全局安装(最新版本)

npm install -g @vue/cli

** 安装指定版本

npm install -g @vue/cli@5.0.6

** 查看版本号

vue --version

五、创建项目

2种方式：

1、vue create命令创建

2、vue ui 图形化界面创建

** 使用vue create命令

vue create myapp(创建一个myapp项目)

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

 preset 预设3个选项：

 第三个：Manually select features 需要手动对项目进行配置

 Vue CLI v5.0.8
? 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, and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

 Babel  转码器 用于将ES6代码转为ES5

 TypeScript 

 Progressive Web App... 支持渐进式web应用程序

 Router 路由管理

 Vuex 状态管理

 CSS Pre-processors CSS预处理器

 Linter / Formatter 代码风格检查和格式校验

 Unit Testing 单元测试

 E2E Testing 端到端测试

 这里保持默认，按enter键选择版本

 Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

ESLint with error prevention only 指ESLint仅用于错误预防

后3个表示是选择ESLint和哪一种代码规范一起使用

? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

提示选择代码检测方式，这里选择默认选项“Lint on save”（保存时检测）

? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

提示选择配置信息的存放位置。第一个选项是指在专门的配置文件中存放配置信息，第二个选项是将配置信息存储在package.json文件中

? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

提示为当前配置定义一个名字

? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: myapp

输入名字后按Enter键开始创建项目

根据提示在命令提示符窗口中输入命令cd myapp切换到项目目录

终止项目使用ctrl+c