Как визуализировать данные в экземпляре Vue проекта Vue Cli - PullRequest
Новая
       9

Как визуализировать данные в экземпляре Vue проекта Vue Cli

0 голосов
/ 05 мая 2018

Я создал проект Vue от Vue-Cli для учебы. Это хорошо работает, когда все данные хранятся в компонентах. Но мой вопрос заключается в том, почему данные в экземпляре 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>

Ответы [ 2 ]

0 голосов
/ 06 мая 2018

В дополнение к ответу @ 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 для вашего проекта vue-cli, найдите конфигурацию вашего веб-пакета и измените псевдоним 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.

0 голосов
/ 05 мая 2018

Вы переопределяете функцию рендеринга , функция рендеринга сообщает, что должны делать ваши компоненты: 

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>
...