1.启动

学一个框架就是想用它，所以要先看怎么用。先在网上找一个现成的VUE工程。

首先需要配置好node.js环境，然后安装vue-cil脚手架。这是一个基于Node.js的构建工具，所以先来了解一下什么是构建工具。[用NodeJS实现一个小型打包构建工具。

1.1打包构建工具

用NodeJS实现一个小型打包构建工具。 (fairysoftware.com)

市面上的构建工具很多——grunt，gulp，webpack，parcel，fis等等。从使用上来说，构建工具是可以帮助开发者管理本地源文件，优化开发流程，降低开发复杂度，使开发者更加专注在业务逻辑开发上的一种工具。

以webpack为例，概念 | webpack 中文文档 (docschina.org)

Webpack 启动后，会根据我们的配置，找到项目中的某个指定文件（一般这个文件都会是一个 JS 文件）作为入口。然后顺着入口文件中的代码，根据代码中出现的 import（ES Modules）或者是 require（CommonJS）之类的语句，解析推断出来这个文件所依赖的资源模块，然后再分别去解析每个资源模块的依赖，周而复始，最后形成整个项目中所有用到的文件之间的依赖关系树。

有了这个依赖关系树过后， Webpack 会遍历（递归）这个依赖树，找到每个节点对应的资源文件，然后根据配置选项中的 Loader 配置，交给对应的 Loader 去加载这个模块，最后将加载的结果放入 bundle.js（打包结果）中，从而实现整个项目的打包。

对于依赖模块中无法通过 JavaScript 代码表示的资源模块，例如图片或字体文件，一般的 Loader 会将它们单独作为资源文件拷贝到输出目录中，然后将这个资源文件所对应的访问路径作为这个模块的导出成员暴露给外部。

整个打包过程中，Loader 机制起了很重要的作用，因为如果没有 Loader 的话，Webpack 就无法实现各种各样类型的资源文件加载，那 Webpack 也就只能算是一个用来合并 JS 模块代码的工具了。

webpack核心工作过程中的关键环节：(1条消息) webpack运行机制与核心工作原理_鸭绒的博客-CSDN博客_webpack原理

1.Webpack CLI 启动打包流程；
2.载入 Webpack 核心模块，创建 Compiler 对象；
3.使用 Compiler 对象开始编译整个项目；
4.从入口文件开始，解析模块依赖，形成依赖关系树；
5.递归依赖树，将每个模块交给对应的 Loader 处理；
6.合并 Loader 处理完的结果，将打包结果输出到 dist 目录。

1.2开始运行

可以在项目里找到package.json文件，里面有部分可以看到项目所需的依赖包。

1
2
3
4
5
6
7
8
9
"dependencies": {
    "vue": "^2.4.2",
    "vue-router": "^2.7.0"
  },
  "devDependencies": {
  ...
      "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },

在命令行输入npm install下载依赖包，运行完后，就会多一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

至于npm run dev和npm run serve，这是脚手架的原因。npm run dev 是 vue-cli2。npm run serve 是 vue-cli3。具体可以查看package.json文件中script下的名字。