说明
main.js 文件中的代码 import Vue from 'vue' ,引入的是下面文件:
当前工程的目录\node_modules\vue\dist\vue.runtime.esm.js
证明
在 当前工程的目录\node_modules\vue\package.json 文件中配置的,如下图:
vue.runtime.esm.js
- runtime:只包含运行时环境,不包含 编译器
- esm:全拼 es6 module ,表示 ES6模块化,目前主流的方式
类比java
vue.runtime.esm.js 相当于 java中的 JRE,提供运行时环境,可以运行java程序,不能编译 java
为什么使用 runtime 版vue
因为 runtime 版本相比完整版体积要 小大约 30%
带来的影响
由于不包含 编译器,无法解析下面代码中的 template 部分:
var app = new Vue({
el: '#app',
data: {
},
template:'' //完整版vue可以解析,runtime版不能解析
})
所以 main.js 中的代码,如下:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App), //不需要编译器,`runtime` 版本的vue就能运行
}).$mount('#app')
使用了 render ,不需要编译器,runtime 版本的vue就能运行
官网
管网有解释,见 链接
验证
引用默认的vue
修改 main.js 代码,引用默认的vue,即:vue.runtime.esm.js,并使用 template,如下:
//引用默认的vue
import Vue from 'vue'
// import App from './App.vue'
Vue.config.productionTip = false
new Vue({
// render: h => h(App),
template:`<div>测试</div>`//使用template
}).$mount('#app')
无法正常显示,说明无法解析 template
引用完整版的vue
修改 main.js 代码,引用完整版的vue,并使用 template,如下:
//引用完整版的vue
import Vue from 'vue/dist/vue'
// import App from './App.vue'
Vue.config.productionTip = false
new Vue({
// render: h => h(App),
template:`<div>测试</div>`//使用template
}).$mount('#app')
页面能够正常显示 测试,说明可以解析 template
