以下是在学习Vue.js源码过程中的一些知识点的记录,主要按照了Vue.js 技术揭秘这上的学习流程作为参考~
Version:2.6.12
构建:
在package.json中build对应的指令是"node scripts/build.js"
当使用指令npm run build
的时候就会运行scripts/build.js文件
config.js
该文件在build.js
中被引入,主要包含了一些构建配置
该文件主要包含了以下一些内容:
-
builds
对象- 是一个对象,对象里面有很多的key也对应了一个对象
- key对应的对象中含有entry、dest、format、env、banner这些属性
-
genConfig
方法利用builds中的一个项生成新的一个配置对象,因为vue构建使用了rollup来进行,构造的新的config结构和rollup中的结构保持一致
import Vue from 'vue' 做了什么事情?
-
在Web应用下,使用Runtime+Compiler构建的Vue.js进行分析
-
入口:src/platforms/web/entry-runtime-with-compiler.js
-
在entry-runtime-with-compiler.js文件中可以看到引入了一个Vue
import Vue from './runtime/index'
-
然后进入到runtime/index.js进行观察,这个文件里面也引入了Vue
import Vue from 'core/index'
-
然后再进入这个core目录下的index.js,这个里面的Vue还是引入的
import Vue from './instance/index'
-
最后进入到instance目录下的index.js,这个时候终于看见了Vue是怎么构造出来的
function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) }
通过函数的方式来对Vue进行了定义,我们在Vue实例的时候用new来初始化对象。所以Vue的本质就是利用
Function
来构建,同时在使用的时候针对不同的场景来给Vue的原型上挂载方法。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!