目录

创建一个项目

---

创建一个项目

运行以下命令来创建一个新项目：

vue create vuecli-demo

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”（使用↑ ↓箭头切换，Enter 确认）来选取需要的特性。

Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint) // (使用 vue 2 默认的配置，会安装babel和eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) // (使用 vue 3 默认的配置，会安装babel和eslint)
  Manually select features // (手动配置)

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置（通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选）则提供了更多的选项，它们是面向生产的项目更加需要的。

手动配置选项说明

序号	选项	描述	默认选择
1	Choose Vue version	选择 Vue 版本，目前 Vue 2 和 Vue 3 两个版本。	Y
2	Babel	vue项目中普遍使用 es6 语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将 es6 转成 es5。	Y
3	TypeScript	TypeScript 通过添加类型来扩展 JavaScript。通过了解 JavaScript，TypeScript 可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行 JavaScript 的地方。 完全开源。
4	Progressive Web App (PWA) Support	渐进式Web应用程序（PWA）支持。
5	Router	Vue Router 路由。
6	Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
7	CSS Pre-processors	CSS预处理器，预处理器：比如要用 sass 或者 cssNext 就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成 css。
8	Linter / Formatter	格式化程序。	Y
9	Unit Testing	单元测试。
10	E2E Testing	端到端（end-to-end）。

向上向下箭头控制方向，空格进行选中，可选择如下配置，引入 Router 和 vuex 以及 CSS预处理器 （这里为了下面介绍目录结构，后续再学习）

Vue CLI v4.5.12
? 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)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择完成回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

选择 Vue 版本。这里选择 2.x，即直接选择回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

选择是否使用历史模式，此处建议选择不使用，即输入 n，选择使用 hash 模式。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? 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 预处理器。node-sass 是自动编译实时的，dart-sass 需要保存后才会生效，此处建议选择 Sass/SCSS(with dart-sass)，即直接选择回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择 eslint 校验规则。此处建议选择默认配置，即直接回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

选择什么时候进行代码校验。Lint on save 保存时检查， Lint and fix on commit 提交时检查，此处建议选择第一个，即直接回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? 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

选择如何存放配置。In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中，此处建议选择第二个配置，即存放到 package.json 文件中。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)

选择是否保存本次配置。建议选择 N，即不保存，否则以后创建项目修改不配置不太方便。

等待项目创建。

Vue CLI v4.5.12
✨  Creating project in E:\workspace\stary\HBuilder\hdemo\vuecli-demo01.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

[ .................] | fetchMetadata: sill pacote range manifest for string_decoder@^1.0.0 fetched in 117ms

如果你决定保存本次配置，命名该配置名称，比如：vuecli-demo，并回车确认。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: vuecli-demo

当你下次创建项目时，就会显示你保存的 preset 可供选择。

Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
> vuecli-demo ([Vue 2] dart-sass, babel, router, vuex, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。

在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。

这里是上一步创建的名为 vuecli-demo preset 的示例：

{
  "useTaobaoRegistry": true,
  "presets": {
    "vuecli-demo": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "vueVersion": "2",
      "cssPreprocessor": "dart-sass"
    }
  }
}

Preset 的数据会被插件生成器用来生成相应的项目文件。除了上述这些字段，你也可以为集成工具添加配置：

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

这些额外的配置将会根据 useConfigFiles 的值被合并到 package.json 或相应的配置文件中。例如，当 "useConfigFiles": true 的时候，configs 的值将会被合并到 vue.config.js 中。

项目目录结构

vuecli-demo
  |- dist // 打包后的目录，当执行打包命令后，自动生成该目录。
  |- node_modules // 第三方依赖，我们安装的各种依赖都在这个目录里面
  |- public // 存放公共资源的地方 比如 json 文件，里面有一个入口 html 页面
  |- /src // 这个是重点，我们的源码以及开发的静态资源等都在里面
    |- assets // 资源文件（字体，图标，图片）
    |- components // 自定义的公共组件
    |- router // 路由配置
    |- store // 存放 vuex 状态管理
    |- views  // 存放页面
    |- App.vue // 首页组件（默认组件）,也叫根组件
    |- main.js // 项目执行的入口 js   
  |- babel.config.js // babel 配置文件
  |- package.json // node 配置依赖文件
  |- package-lock.json // 版本管理使用的文件
  |- README.md // 项目的说明文档