Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试

电脑:mac; vue版本:2.7.14; 编辑器:IntelliJ IEDA

一、下载源码

github地址
我是先下载了zip压缩包,直接使用https地址从github拉取代码会很慢:
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第1张图片

下载完源码之后可以放在自己的仓库里,我是放在了自己的gitlab仓库里。把项目解压到本地之后,根据gitlab的提示推送现有代码:
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第2张图片
下载完之后,在idea中打开项目:
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第3张图片
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第4张图片
从远程仓库拉取代码之后,可以看到已经有一条初始化代码的git记录:
在这里插入图片描述
拉取代码之后简单看一下源码中的src目录:
src
├─compiler 编译相关,将模版转换成render函数
├─core Vue 核心库,定义了很多组件和关键方法、以及vue初始化、生命周期、虚拟DOM
├─platforms 平台相关代码,包含web平台下打包入口
├─server SSR,服务端渲染
├─sfc 将.vue 文件编译为 js 对象
└─shared 公共的代码

二、运行项目

(一)安装依赖

vue源码中使用的打包工具是rolluprollup经常用于库的打包,比较轻量,而webpack经常用于项目的打包。安装依赖我这里使用npm i一直报错,所以最后使用的是yarn install安装成功,具体不知道什么原因,知道的大佬可以帮我普及一下❤️❤️❤️❤️❤️

(二)打包项目

我们看一下package.json文件中的dev配置:

"dev": "rollup -w -c scripts/config.js --environment TARGET:full-dev",

-w:watch,监听文件内容变化,内容变化立即重新打包
-c:指定配置文件为script/config.js
--environment:指定项目运行环境是开发环境还是生产环境
在这里,我们可以加上一个配置项:--sourcemap,代码地图,可以记录源码和打包后的代码的对应关系,在调试时可以直接对源码进行调试,不然就得在打包后的1万多行代码中进行调试。

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:full-dev",

然后就可以在命令行运行npm run dev打包项目,打包完成会显示
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第5张图片
会在dist目录下生成一个vue.jsvue.js.map文件
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第6张图片

三、运行示例项目

我们运行一下官方提供的examples中的第一个项目,需要将index.html中引入的vue的地址改成打包后生成的地址:
在这里插入图片描述
在浏览器中运行示例项目需要使用LiveServer插件,在idea中找不到live server插件,所以需要使用npm i -g live-server全局安装。这里报了一个没有权限的错误:
在这里插入图片描述
改为: sudo npm i -g live-server,使用管理员权限安装。
安装完成之后,在命令行运行liver-server命令:
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第7张图片
会给我们在8080端口开启服务,打开浏览器可以看到:
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第8张图片
我们进入到刚才改的那个demo中:
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第9张图片
在浏览器的source中可以看到项目目录:
Vue.js 源码剖析(一)-响应式原理(1)vue2源码启动与调试_第10张图片

四、Vue的不同构建版本

官网对构建版本的解释
vue的版本可以从两个维度进行划分,一个是模块化的方式(4种),一个是代码体积和功能(完整版和运行时)

UMD CommonJS ES Module (基于构建工具使用) ES Module (直接用于浏览器)
完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
完整版 (生产环境) vue.min.js - - vue.esm.browser.min.js
只包含运行时版 (生产环境) vue.runtime.min.js - - -

完整版: 同时包含编译器和运行时的版本,会将vue实例的template属性转化为render函数
编译器: 用来将模板字符串编译成为 JavaScript 渲染函数的代码,体积大、效率低
运行时: 用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码,体积小、效率高。基本上就是除去编译器的其它一切代码,运行时版本创建vue实例时不能使用template属性
UMD: 通过

你可能感兴趣的:(Vue,vue.js,前端,javascript)