摘要：因为仅仅包含运行时编译比完整版少的代码体积，如果你需要使用完整包也是可以的，你需要调整配置。显式的改变运行时引用包模块在引入时做了什么看完了这几个文件的用途之后我们再来看看引入的时候做了什么带着这个疑问我们继续探索。
Vue Runtime Full Analysis - Import Vue Module 回顾系列文章之《VueCLI3上手》
上一节 《Vue运行时全解析 - VueCLI3上手（一）》中介绍了VueCLI3的一些信息，包括以下几点：
官方主推VueCLI3的原因
CLI3的核心概念
CLI3的安装
CLI3简单创建一个项目
Vue ui的使用介绍
使用CLI3按照旧版方式创建项目的方法
安装插件vuex,router方法
修改项目配置的方式
使用VueCLI3的serve命令 打开一个vue文件
阅读本节你能学到什么？
查看项目的配置文件的2种方法
vue inspect 命令方式
vue ui 可视化方式
在脚手架项目中引入vue的方式
脚手架项目入口文件的位置
Webpack 引入模块的机制
vue 编译后的文件的用途
引入的vue做了哪些前置工作
导出配置文件开始分析之前，我们先把项目配置文件先导出来，以做分析备用，在VueCLI3配置的文档中可以找到俩中方式找到配置内容：
inspect命令：通过下面命令将项目的默认配置导出到文件中，这里命名为preset-default-vue-cli-3.js
yanyue$ vue inspect > preset-default-vue-cli-3.js
vue ui 的inspect面板，点击运行可以获取到。
可以通过 vue ui 启动可视化配置界面 如下图，在这里可以看到 task(任务) 面板，task面板有4个task, 选择 inspect 面板能够看到 run(运行按钮) ，点击后，便能够查看到输出的配置信息，在这里查看到的是文本方式查看，由于内容较多，像我这次要分析，需要折叠代码看到这个配置的整体信息，一般情况，我们不会所有配置都去修改，在这里查阅非常方便，而且运行一次，下次切换过来这个内容还在。
就仅仅配置文件足有1000+行... 从这里看vue也是花了大功夫把各种工具的配置文件都进行了优化整合，并提供统一的修改方式，之后我们会讲到如何在项目中修改配置。
项目引入vue的方式要知道项目是怎么引入vue框架的，我们先从最开始了解一下的程序入口main.js文件，因为vue的引入时在这个文件中，那我们先看看这个文件被引入的过程是怎么工作的？
main.jssrc/main.js是整个程序的入口文件，在上面导出的配置文件中我们搜索entry这个关键字，可以看到下图的配置信息：
entry: {
app: [
"./src/main.js"
]
}
VueCLI3项目的入口文件就是通过该配置字段来定义输入给 webpack 的，最后通过 HtmlWebpackPlugin 插件将打包好的脚本注入进根据public中的index.html模板生成的新的html文件中, 如下面配置中插件中的template选项：
new HtmlWebpackPlugin({
templateParameters: function () { /* omitted long function */ },
template: "path/to/project-root/public/index.html"
})
将vue引入项目
第一行代码
import Vue from "vue"
使用了ES2015的语法将vue的运行时作为依赖模块引入程序。
我们关注一下模块细节使用VueCLI3安装的项目，项目的基本依赖（包括babel, vue等）已经被安装好了，我们去node_modules目录中找到vue模块目录，从目录下package.json文件能够看到如下图：
从图中能看到 vue对多种引入方式以不同文件提供支持，包括符合CommonJS模块规范的 vue.runtime.common.js 、符合ES Module模块规范的vue.runtime.esm.js和符合UMD模块规范的 vue.js以及支持TypeScript的类型定义文件index.d.ts。
我们的项目使用webpack打包各个模块，webpack优先会选取ES模块方式引入包(原因：webpack中的处理 参考：roollup相关的解释)
在web环境中，webpack会依据resolve下的mainFields字段中配置的属性所指定的位置读取文件，而当前版本的vue项目配置中配置了pkg.module和pkg.main这俩个位置，所以webpack优先读取了module指向的dist/vue.runtime.esm.js文件，忽略了pkg.main字段指向的位置文件。
编译后的文件上面说到了vue.runtime.esm.js这个文件被webpack作为vue项目提供的vue模块引入到我们的项目中，但是从安装的vue模块目录的dist下却发现了好几个文件，如下图：
以下大多参考官方文档内容，并做了简单解释性翻译：
解释编译后的文件Explanation of Build Files
| UMD | CommonJS | ES Module | |
|---|---|---|---|
| Full | vue.js | vue.common.js | vue.esm.js |
| Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Full (production) | vue.min.js | ||
| Runtime-only (production) | vue.runtime.min.js |
Full: builds that contains both the compiler and the runtime.
完整版，包含 compiler 和 runtime
Compiler: code that is responsible for compiling template strings into JavaScript render functions.
Compiler : 负责将模板字符串编译成render函数
注意: 请留意后面会讲到的render函数
Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.
runtime: 负责创建vue实例， 渲染和调整虚拟DOM等，基本上等效于除去compiler的所有一切。
UMD: UMD builds can be used directly in the browser via a
类型检测定义
浏览器环境检测 Browser environment sniffing
虚拟DOM的实现定义
globals MessageChannel
初始化数据方法定义
initState
initProps
initData
initComputed
initMethods
initWatch
initRender
initMixin
初始化调用
initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);
这一步vue做了很多的前期准备工作，我们在后面章节还会细化...
本节结束这一节我们只关注最基础的这一块，下一节，我们将继续关注细节。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97888.html
摘要：可以译作运行时过程全面分析和解析，这个全面分析涉及到比较基础的或者复杂的重要前端概念和中的概念等。注本篇是运行时全解析系列文章的第一篇，首次发表于，友善转载蟹蟹。附更多内容请参考核心维护者蒋豪群同学的的公开课视频 Vue Runtime Full Analysis - VueCLI3 Get Start VRFA: (Vue Runtime Full Analysis) 可以译作vue...
摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别？ Library 库，本质上是一...
摘要：样式通过标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加，如要引入外部文件，首先需给项目安装依赖包，打开，进入项目目录，输入回车。 showImg(https://segmentfault.com/img/remote/1460000013235090); （一）安装node.js 首先需要安装node环境，可以直接到中文官网http://nodejs.cn/...
摘要：除此之外，你还可以运行打包命令此时之前说的打包生成的文件应该就生成了，或者选择用浏览器打开应该也可以看见和刚刚一样的结果。而如何创建一个对象是知道，因此开头引入了，并使用它常见了一个对象，然后这个对象就管理了这一块区域。 作者：心叶时间：2018-04-25 16:33 本篇最终项目文件Github地址：github.com/paper520/vue.quick/tree/V1 Vue...
摘要：手把手教你用开发一个这一篇讲一个复杂一点的完整的例子，仿制一个，这个就叫一个，在百度搜索就能找到啦为什么仿这个呢，因为这是我用了很久的一个呀。在正确从后台请求道数据后，将数据赋值给并隐藏掉，即设置为。另如有改进意见欢迎反馈，谢谢。 手把手教你用Vue2+webpack+node开发一个H5 app 这一篇讲一个复杂一点的完整的例子，仿制一个H5 APP，这个APP就叫[one.一个]，...
阅读 3133·2021-11-22 15:22
阅读 771·2021-11-16 11:44
阅读 2727·2021-10-12 10:12
阅读 3200·2021-09-29 09:34
阅读 2016·2021-08-21 14:10
阅读 3626·2021-08-19 11:13
阅读 2733·2019-08-30 15:43
阅读 3064·2019-08-29 16:52
