vue教程:import Vue from vue 的解释

说明

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


原文出处:/show_1IX2hsjjOK4J.html