如何在Vue Cli项目的Vue实例中渲染数据

Question

为了学习，我用Vue-Cli创建了一个Vue项目。当所有数据都存储在组件中时，它工作得很好。但我的问题是为什么 Root Vue 实例中的数据无法在根应用程序实例上呈现。我用webpack + vue-loader也是同样的问题

main.js

import Vue from 'vue'
//import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: "#app",
    data() {
        return {
            msg: "Hello from Vue!"
        }
    }
}).$mount('#app');

消息无法显示在页面 index.html

<div id="app">
  {{msg}}
</div>

Answer 1

您正在覆盖 render 函数，渲染函数告诉您的组件应该渲染什么：

new Vue({
    ...
    render: h => h(App)
}).$mount('#app');

删除自定义渲染函数，它将使用您安装它的元素的模板。

// import Vue from 'vue'
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    data() {
        return {
            msg: "Hello from Vue!"
        }
    },
}).$mount('#app');

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  {{msg}}
</div>

Answer 2

补充@Ferrybig 的回答

您回复了 Your solution only works when we use a direct include vue.js file. Failed when use vue-cli or webpack vue-loader. @Ferrybig 的回答。

原因是 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 是 Vue 的完整构建。但默认情况下，vue-cli 使用仅运行时构建（以提高性能）。

为了为您的 vue-cli 项目使用完整的 Vue 构建，找到您的 webpack 配置并将 vue$ 别名更改为如下所示：

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

这在 https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds 中有解释。

如何在Vue Cli项目的Vue实例中渲染数据

How to render data in Vue instance of Vue Cli project

vue.js

vue-cli

main.js