二、准备开发与调试环境

本章概要

• 安装 Vue.js
  • 使用 CDN
  • 使用 npm
  • 使用 Vue CLI
  • 使用 Vite
• 学习 Vue 3.0 源码
• 安装 Visual Studio Code
• 安装 vue-devtools

2.1 安装 Vue.js

Vue.js 的安装可以使用以下4种方式：

• 使用 CDN
• 使用 npm
• 使用 Vue CLI
• 使用 Vite

2.1.1 使用 CDN

CDN（Content Delivery Network，内容分发网络）是构建在现有网络基础之上的只能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问的响应速度和命中率。
使用 CDN 在页面中引入 Vue 框架是最简单的方式，只需要选择一个提供 Vue.js 链接的稳定的 CDN 服务商就可以了，Vue 3.0 的官网上给出了一个 CDN 的链接，在页面中使用

<script src="https://unpkg.com/vue@next">script>
1

2.1.2 使用 npm

npm（node package manager）是一个Node.js 包管理和分发工具，也是整个 Node.js 社区最流行、支持第三方模块最多的包管理工具。
使用 npm 可以便捷而快速地进行Vue.js 安装、使用和升级，不用担心 Vue 项目中用到的第三方库从哪下载，用哪个版本最合适等问题，因为这一切都交给了 npm，它可以对第三方依赖进行很好的管理。
Node.js 已经集成了 npm ，只要安装了 Node.js ，npm 也就一并安装好了。进入 Node.js 官网（https://nodejs.org）

有 LTS 和 Current 两个版本，前者是长期支持版本，比较稳定；后者是最新版本，包含了最新的特性，自然也可能会存在一些 Bug 。
所以此处选择 12.19.0 LTS 版本进行下载（https://nodejs.org/dist/v12.19.0/），下载后双击下载文件 node-v12.19.0-x64.msi，开始安装，如图

安装完成，查看node.js和npm版本

C:\Users\dell>node -v
v12.19.0
C:\Users\dell>npm -v
6.14.8
1
2
3
4

如果要使用最新版本的 npm ，可执行以下命令

npm install npm@latest -g
1

接下来就可以使用npm 来安装 Vue 3.0 了，npm 使用 Vue 构建大型应用时推荐的安装方法。执行下面的命令，安装 Vue 3.0 的最新稳定版。

npm install vue@3.0.0
1

npm 包的安装分为本地安装和全局安装，上述命令为本地安装，全局安装就是多加一个“-g”参数，如下

npm install vue@3.0.0 -g
1

Vue 框架总是在项目中使用，因此不建议采用全局安装。
安装结果如下：

E:\vue3>npm install vue@next
npm WARN saveError ENOENT: no such file or directory, open 'E:\vue3\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'E:\vue3\package.json'
npm WARN vue3 No description
npm WARN vue3 No repository field.
npm WARN vue3 No README data
npm WARN vue3 No license field.

+ vue@3.2.36
added 21 packages from 43 contributors and audited 21 packages in 19.449s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

本地安装将包安装到“./node_modules”目录下（.代表运行npm命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 子目录，本地安装的模块将无法被其它路径下的项目引用。
全局安装将包安装到 C:\User%user%\AppData\Roaming\npm 目录下（根据操作系统不同，该位置会有所不同），“%user%”表示当前登录 Windows 系统的账户名，全局安装的包可以直接在命令提示符窗口中使用。
也可以修改全局模块的默认安装路径。方法如下：
（1）在自己选定的目录下新建 npm_global 和 npm_cache 目录（根据自己的喜好设置目录名称），前者为全局模块的存放路径，后者作为缓存的路径；
（2）找到 Node.js 的安装目录，编辑“.\node_modules\npm\npmrc”文件，输入以下内容：

prefix=E:\NodeModules\npm_global
cache=E:\NodeModules\npm_cache
1
2

（3）修改Windows 的环境变量 NODE_PATH ，在系统变量下修改 NODE_PATH 的变量值为 E:\NodeModules\npm_global。
之后再通过npm安装模版，会直接安装到 E:\NodeModules\npm_global 目录下。要看全局安装的包，可以执行以下命令：

npm list -g
npm list -g --depth 0
1
2

–depth 0 表示仅查看一级目录。
如果要更新 Vue 版本，可以使用以下命令：

npm update vue@next
1

如果要卸载 Vue ，使用以下命令

npm uninstall vue@next
1

国外的服务器访问较慢。使用淘宝定制的 cnpm 命令工具代替默认的 npm，在命令提示符窗口中执行以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

以后就可以直接使用cnpm命令安装模块，如下：

cnpm install 
1

提示：开发基于 Vue 3.0 的前端项目时，更多的是使用 Vue CLI 先搭建脚手架项目，而在这一过程中，就会自动安装 Vue 的各个模块，所以无需单独使用 npm 安装 Vue ，不过由于 npm 本身在项目中应用较多，掌握 npm 的常见用法是有用的。

2.1.3 使用 Vue CLI

后详见《十三、Vue CLI》

2.1.4 使用 Vite

Vite 是一个 Web 开发构建工具，由于采用了原生的 ES 模块导入方法，它允许快速地为代码提供服务。
后详见《十九、全新的 Web 开发构建工具——Vite》

2.2 学习 Vue 3.0 的源码

下载源码：https://github.com/vuejs/core/releases/tag/v3.0.0。
目录结构如下

（1）compiler-core：与平台无关的编译器核心。它既包含可扩展的基础功能，又包含所有与平台无关的插件。
（2）compiler-dom：基于 compiler-core 封装针对浏览器的编译器。
（3）compiler-sfc：用于编译Vue单文件组件的低级使用程序。
（4）compiler-ssr：针对服务端渲染生成优化过的渲染函数的编译器。
（5）reactivity：Vue 3.0 响应式系统的实现。他可以独立于框架使用。
（6）runtime-core：与平台无关的运行时环境。包括虚拟 dom 渲染器、Vue 组件实现和 Vue 的各种 API 。可以使用此程序包构建自定义渲染器。
（7）runtime-dom：针对浏览器运行时的环境。包括对原生 DOM API 、DOM 事件和 DOM 属性的处理。
（8）runtime-test：仅用于 Vue 自身的内部测试。
（9）server-renderer：与服务器渲染相关的软件包。
（10）shared：在多个软件包之间共享的内部使用函数和常量。
（11）size-check：这个包是私有的，用于检查 tree-shaking 后的基线运行时大小。
（12）template-explorer：用于调试模版编译器输出的开发工具。
（13）vue：全面构建，引用了上述 runtime 和 compiler 目录。

Vue 3.0 代码库使用 Yarn 作为包管理工具，Yarn 是一个类似于 npm 的包管理工具，由 FackBook 推出并开源。如果要编译 Vue 3.0 的打哪，生成 Vue 的独立版本，需要先安装 Yarn

下载地址：https://repo.huaweicloud.com/yarn/v1.22.4/yarn-1.22.4.msi
安装完成后设置环境变量，添加绝对路径

2.3 安装 Visual Studio Code

下载地址：https://code.visualstudio.com/
安装完毕后开始为 Visual Studio Code 安装 Vetur 插件。该插件支持 .vue 文件的语法高亮显示，除了支持 template 模版以外，还支持大多数主流的前端开发脚本和插件，如 Sass 和 TypeScript 等。
在 Visual Studio Code 开发环境最左侧的活动栏中单击 Extensions 图片按钮，如图

安装 Vetur

安装 ESLint 插件，ESLint 是一个 JavaScript 语法规则和代码风格的检查工具。

最后安装 Code Runner 插件，该插件可以在 Visual Studio Code 中以一种快捷方式运行各类代码，甚至是代码片段。安装完成后，可以在代码编辑窗口中右击，然后从弹出的快捷菜单中选择 Run Code 选项运行代码。

2.4 安装 vue-devtools

vue-devtools 是基于 Google Chrome 浏览器的一款调试 Vue.js 应用的开发者浏览器扩展，可以在浏览器开发者工具下检查和调试 Vue 应用程序。
（1）在 GitHub 上下载 vue-devtools 的源码，地址：https://github.com/vuejs/devtools

（2）解压缩后，打开命令提示符窗口，进入主目录，首先执行 yarn 命令，下载第三方依赖。下载完成后，执行 yarn run build 命令，编译源程序

执行 yarn 命令时出现了版本兼容问题，我直接又执行 yarn config set ignore-engines true 命令，然后接着执行的 yarn 和 yarn run build 命令

（3）编译完成后，vue-devtools 编译完成后的目录结构如下

打开浏览器，单击右上角的“自定义及控制”按钮，从弹出的快捷菜单中选择【更多工具】—>【扩展程序】选项，确保开发者模式处于打开状态，然后单击“加载已解压的扩展程序”按钮，选择 刚才编译的目录下的 package/shell-chrome文件夹