vue-cli（脚手架）创建新项目

vue-cli（脚手架）创建项目

vue-cli官网文档

项目创建

终端运行命令

vue create 项目名称

输入后回车可看到相关配置

? Please pick a preset: (Use arrow keys)
default (babel, eslint) // 默认选项
Manually select features // 手动选择功能

选择default则会直接创建项目，创建项目包括 babel\eslin 这些工具，其他比如 Router/Vuex 等依赖需要自己手动安装
选择Manually select features 手动安装，回车可选择所需配置选项

? 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 // ts
( ) Progressive Web App (PWA) Support // 支持渐进式网页应用程序
( ) Router // vue路由
( ) Vuex // 状态管理模式
( ) CSS Pre-processors // css预处理
( ) Linter / Formatter // 代码风格、格式校验
( ) Unit Testing // 单元测试
( ) E2E Testing // 端对端测试

下面是各种配置的选项

typescript

Use class-style component syntax?

这里询问的是是否使用class风格的组件语法，如果在项目中想要保持使用 TypeScript 的class风格的话，建议大家选择y

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

使用Babel与TypeScript一起用于自动检测的填充?这里一定要选择y

Router

Use history mode for router? (Requires proper server setup for index fallback in production)

路由是否使用 history 模式？如果项目中存在要求就使用 history(即:y)，但是一般还是推荐大家使用 hash 模式，毕竟 history 模式需要依赖运维。

CSS Pre-processors css

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus

选择一种CSS预处理器

Linter / Formatter

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only // 只进行报错提醒
ESLint + Airbnb config // 不严谨模式
ESLint + Standard config // 正常模式
ESLint + Prettier // 严格模式
TSLint (deprecated) // TypeScript格式验证工具

TSLint 只有在选择 TypeScript 时才会存在。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(*) Lint on save // 保存时检测
( ) Lint and fix on commit // 修复和提交时检测

选择校验时机，一般都会选择保存时校验，好及时做出调整

额外选项

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 存放在专用配置文件中
In package.json // 存放在package.json中

选择 Babel,PostCSS, ESLint 等自定义配置的存放位置

Save this as a preset for future projects? (y/N)

是否保存当前选择的配置项，如果当前配置是经常用到的配置，建议选择y存储一下当前配置项
选择n之后则会直接开始创建项目了，选择y之后则会输入一个存储当前配置项的名称:

? Save preset as:

下次创建项目会看到自己存储的这个名字

项目依赖

Vue-cli3.0 可以使用npm安装所需要的依赖，出了这个他还提供了一个其他的方法vue add方法

// npm
npm install --save axios
// vue
vue add axioa

既然可以使用npm安装为什么还要使用vue add安装呢？官方文档中是这样说明：

Vue CLI使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json ，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

当然创建一个项目也可以使用vue ui可视化创建

vue ui