这个不用多说，地球人都知道是通过npm生成的，而我们的npm的命令配置一般存在于项目根目录的package.json文件的“scripts”标签字段，接下来我们就来聊聊关于vue.js从入门到项目实践?以下内容大家不妨参考一二希望能帮到您!
vue.js从入门到项目实践
这个不用多说，地球人都知道是通过npm生成的，而我们的npm的命令配置一般存在于项目根目录的package.json文件的“scripts”标签字段。
打开“package.json”文件，我们找到如下位置：
"scripts": {
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
}
可以看到第一个dev命名通过“rollup”执行，如果不太了解rollup.js的朋友可以看一下rollup官网的介绍：
rollup官方地址：https://www.rollupjs.com/
再看一下dev命令：
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
有一个target的参数，值为“web-full-dev”
我们再来找到定义这个命令的地方，路径为（vue/scripts/config.js）
找到如下代码：
'web-full-dev': {
entry: resolve('web/entry-runtime-with-compiler.js'),
dest: resolve('dist/vue.js'),
format: 'umd',
env: 'development',
alias: { he: './entity-decoder' },
banner
}
熟悉webpack打包的人，应该很熟悉这种语法，这就是打包带一个入口文件个输出的文件。
入口：web/entry-runtime-with-compiler.js
生成的文件：dist/vue.js
我们再到入口文件看一下（entry-runtime-with-compiler.js）
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
// 这是模板编译的代码
const { render, staticRenderFns } = compileToFunctions(template, {
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
......省略部分代码
}
return mount.call(this, el, hydrating)
}
我们看到首先是暂存了一份 mount 对象。
const mount = Vue.prototype.$mount
接着是给Vue.prototype对象上面挂载了一个$mount方法，
然后会去获取 “el” 这个参数，如果“el”是挂载在body或者html上面的话，就会触发一个警告，代码如下：
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
最后调用之前暂存的mount变量。
,
