邂逅 Vue CLI

codersjj
152 阅读9分钟

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

前面我们讲了关于 Webpack 的一些主要配置，本章要讲的是关于 Vue CLI（即 Vue 的脚手架，它是基于 Webpack 的）和 Vite（学完 Webpack 之后再来学习 Vite 就比较简单了）的内容。

1. 脚手架和 Vue CLI 的理解

  • 什么是脚手架（scaffold）？

    • 前面我们学习了如何通过 Webpack 配置 Vue 的开发环境，但在真实开发中，我们不可能每一个项目都从头开始编写所有的 Webpack 配置信息，这样做会大大降低开发效率；

    • 所以在真实开发中，我们通常会使用脚手架来创建一个项目，创建 Vue 的项目时就可以使用 Vue 的脚手架 Vue CLI；

    • 脚手架其实是建筑工程中的一个概念（在建造一个建筑前，会先搭建脚手架，之后再借助脚手架这个工作平台完成建筑的建造），而在软件工程中也会将一些帮助我们搭建项目的工具称为脚手架；

      image-20211212213118532

  • Vue 的脚手架即 Vue CLI：

    • CLI 是 Command-Line Interface，翻译为命令行界面（我们会在命令行终端界面中使用脚手架做交互操作）；
    • 我们可以通过 CLI 选择项目的配置并创建出我们的项目；
    • Vue CLI 已经内置了 Webpack 相关的配置，因此我们不需要从零开始配置 Webpack，只需要在 CLI 帮我们实现了的配置基础上再根据需要添加配置就可以了；

以上，就是对脚手架和 Vue CLI 的简单介绍。

2. Vue CLI 创建项目及目录结构解析

2.1 Vue CLI 的安装和使用

如何使用 Vue CLI 创建 Vue 项目呢？

我们已经知道，Vue CLI 本质上是一个工具，那么我们首先得有这个工具，所以我们打开电脑的命令行终端，先来安装它：

npm install @vue/cli -g

这里我们使用 -g 对 Vue CLI 进行全局安装，这样以后在电脑的任何位置就都可以通过 vue 这一脚手架命令来创建项目了。

如果你之前已经安装过 Vue CLI 了，那么执行 npm install @vue/cli -g 命令其实会自动帮你将 Vue CLI 升级到最新的版本的。

当然，你也可以使用更新版本的命令（将当前电脑上的 Vue CLI 更新到最新的版本）：

npm update @vue/cli -g

成功安装后，我们可以执行 vue --version 命令查看安装的脚手架版本：

image-20211213203915057

可以看到，当前安装的 Vue CLI 版本是 4.5.15，这也是当前的最新版本。

安装完 Vue CLI 这个工具后，就意味着我们的电脑上已经有这个工具了。下面，我们就可以通过这个工具去创建 Vue 的项目了（前面我们已经说过了，脚手架就是来帮助我们创建项目的，并且在项目创建完成后，项目会有自己的目录结构，也会有相应的一些 Webpack 的配置，相当于很多东西都已经帮我们搭建、配置好了，我们只需要在此基础上开始项目的开发就可以了）。使用 Vue CLI 创建项目的命令如下（vue 命名 + create 选项 + 你想要创建的项目的名称）：

vue create 你想要创建的项目的名称

这里你可能会有一个疑问：我安装的明明是 @vue/cli，而创建项目时用的命令怎么是叫 vue 呢？事实上，这里安装的包的名字（@vue/cli）和真正使用的命令的名字（vue）之间并没有直接的关系，我们真正使用的命令的名字和安装的包中的 package.json 中的 bin 中配置的名字有关：

image-20211213202549700

更准确地来说，我们这里使用的 vue 命令其实执行的是你安装的 nodejs 目录（在命令行终端输入 where vue 可以查看到其所在路径）下的 vue 文件（shell 脚本文件）。如果你把这个文件改名成 myvue，那么想要使用 Vue CLI 创建项目就得通过 myvue create 你想要创建的项目的名称 来做了。

比如，我们创建一个名为 vuecli_demo 的项目：

vue create vuecli_demo

输入上面的命令后敲下回车，效果如下：

image-20211213213702643

可以看到，脚手架想让我们选择一个预设，这是因为我们每次创建的项目所需要的东西可能都是不一样的，有些项目可能需要 babel，有些项目可能就不需要，或者有些项目需要 eslint，而有些项目又不需要。所以，Vue CLI 会根据我们的选择来决定创建的项目中会包含哪些特性（features）。

那么，Vue CLI 给我们提供了 3 个选择：

  1. Default ([Vue 2] babel, eslint)：创建一个 Vue 2 的项目，并且包含 babel 和 eslint 特性；
  2. Default (Vue 3) ([Vue 3] babel, eslint)：创建一个 Vue 3 的项目，并且包含 babel 和 eslint 特性；
  3. Manually select features：手动地选择特性（即我们自己来选择需要哪些特性，不需要哪些特性）

我们选中第 3 个：

image-20211213215127137

然后敲回车：

image-20211213215149212

可以看到，脚手架给我们列出了所有可以选择的特性。下面对各个特性进行简单介绍：

  1. Choose Vue version：选择 Vue 的版本（Vue 2/Vue 3），我们待会要创建 Vue 3 的项目，所以需要选中这项；
  2. Babel：是否使用 Babel，后面在项目中我们需要将 ES6+ 的代码转成 ES5 的代码以及包括其它特性的转化，因此需要使用 Babel，所以需要选中这项；
  3. TypeScript：是否使用 TypeScript，因为我们这里还没讲到 TypeScript，所以先不选中这项；
  4. Progressive Web App (PWA) Support：项目是否支持 PWA，即是否支持渐进式的 Web 开发（可以用来给应用程序做缓存相关的东西，在很多地方都有它，但真正在公司应用的并不多，我们一般用得较少），这里不选中这项；
  5. Router：是否添加路由，后面再讲，先不选中这项；
  6. Vuex：是否添加 Vuex 状态管理，后面再讲，先不选中这项；
  7. CSS Pre-processors：是否添加 CSS 预处理器（如 less、sass、stylus 等），如果选中这项，脚手架会帮我们做好 CSS 预处理器的有关配置，我们先不选中这项（等到后面项目中用到 less 等 CSS 预处理器时我们再来自己配置）；
  8. Linter / Formatter：是否添加 ESLint，用来对代码的格式进行检查以及格式化代码，我们先不选中这项，后面讲项目时再来用；
  9. Unit Testing：是否添加单元测试，先不选中这项；
  10. E2E Testing：是否添加端到端测试，先不选中这项；

那么，我们这里先选择 Choose Vue version 和 Babel 这两项特性：

image-20211213222846491

然后敲回车，之后选择 3.x 版本的 Vue（即 Vue 3）：

image-20211213223000697

再来敲回车：

image-20211213223102532

这次，脚手架让我们选择 Babel、ESLint 等配置（包括之前讲过的 postcss 的配置）存放的位置（生成单独的（专门的）配置文件/放在 package.json 文件中），因为把这些配置都放到 package.json 中可能会导致 package.json 文件太大了，不方便管理，所以我们一般会选择将这些配置信息放到独立的配置文件中。因此，我们这里选中第一项，然后敲回车：

image-20211213224337331

可以看到，这时脚手架问我们是否将这次手动配置各种特性的内容保存为一个预设，以便提供给将来的项目使用。如果输入 y，即选择“是”，那么下次创建项目时就可以直接选择本次保存的这个预设，就可以不需要再来手动选择一遍特性了。我们这里输入 y，之后给这次保存的预设取个名字（比如 my_preset）：

image-20211213225123789

然后敲回车：

image-20211213225257331

可以看到，Vue CLI 就开始帮我们搭建 Vue 3 项目了。稍等片刻（因为要下载很多依赖，所以可能需要等待一会儿）后就能看到项目成功创建完成了：

image-20211213225941612

下次再使用 vue 命令（如 vue create aaa）通过脚手架创建项目时，你就可以选择刚才保存的预设了：

image-20211213230205960

以上，就是 Vue CLI 这一脚手架的使用过程。

2.2 项目的目录结构

使用 Vue CLI 创建出来的项目，其目录结构如下：

image-20211214122005629

  • node_modules：当前项目所需的依赖（包括开发时依赖和生产时依赖）；

  • public：存放项目的一些资源（主要是两个东西：html 模板和 .ico 网站图标），此文件夹里面的文件到时候会在打包时复制到输出目录下（之前在讲 Webpack 时已经讲过）；

  • src：所有的源代码都放在这个目录下（在这个文件夹下编写你的源码）；

    • 默认已经帮我们建好了 assets 文件夹（存放一些资源文件，如图片资源）、components 文件夹（存放组件文件）、App.vue 文件（根组件）和 main.js 文件（项目的入口文件）；
    • 当然，我们以后还会修改 src 目录下的目录结构；

  • .browserslistrc：此文件用来设置目标浏览器（要适配的浏览器）的范围，就是说哪些浏览器你想要做适配，哪些浏览器你不想做适配，都可以在这个文件中进行配置；

    • 我们可以打开这个文件，里面已经默认给我们配置了一些内容：

      image-20211214123812978

      而我们在打包项目代码时，有些 css、js 代码可能需要适配某些浏览器，那么就会根据这个 .browserslistrc 文件中编写的条件去查询具体该如何适配（事实上是去 https://caniuse.com/ 这个网站上去查询的）。比如这里 > 1% 的意思是：要适配的浏览器的市场份额要求大于 1%（那么如果某些浏览器的市场份额不到 1%，则最终打包代码时就不会对这些浏览器做适配），last 2 versions 的意思是：只对最近的两个版本的浏览器做适配，not dead 的意思是：对还在维护的浏览器做适配，已经不再维护的浏览器（超过 2 年没有官方支持或者更新的浏览器）就不对其做适配了；

    • 关于 .browserslistrc 文件的更多内容，可以查阅 browserslist 的官方文档：github.com/browserslis…

    • 一般情况下，我们使用上面默认的三个条件就可以了；

  • .gitignore：配置版本管理工具 git 要忽略的文件（忽略掉的文件就不会上传到 git 仓库中了）；

  • babel.config.js：babel 的配置文件，这里默认配置了针对 Vue 自己的预设；

  • package-lock.json：记录了 package.json 文件中依赖的精确信息、缓存信息；

  • package.json：记录了项目的依赖信息；

  • README.md：项目的说明文档；

avatar
文章
阅读
粉丝