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');

msg无法在页面index.html

显示

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

Answer 1

您正在覆盖render函数，渲染函数会告诉您的组件应呈现的内容：

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

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

＆＃13;

// import Vue from 'vue'
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    data() {
        return {
            msg: "Hello from Vue!"
        }
    },
}).$mount('#app');

＆＃13;

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

＆＃13;

Answer 2

补充@ Ferrybig的回答

你回复了isNaN() @ Ferrybig的答案。

原因是Your solution only works when we use a direct include vue.js file. Failed when use vue-cli or webpack vue-loader.是Vue的完整版本。但默认情况下，vue-cli使用仅运行时构建（以提高性能）。

要为vue-cli项目使用完整的Vue构建，请找到您的webpack配置并将https://cdn.jsdelivr.net/npm/vue/dist/vue.js别名更改为：

vue$

https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds中对此进行了解释。

如何在Vue Cli项目的Vue实例中呈现数据

main.js

2 个答案: