Vue JS 2.0 nie renderuje niczego?

Question

Stosując Vue (^ 2.0.0-rc.6) + Browserify, wejście jest index.js:

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

new Vue({ // eslint-disable-line no-new 
    el: '#root', 
    render: (h) => h(App) 
}) 

App.vue:

<template> 
    <div id="root"> 
    <hello></hello> 
    </div> 
</template> 

<script> 
import Hello from '../components/Hello.vue' 
export default { 
    components: { 
    Hello 
    } 
} 
</script> 

<style> 
body { 
    font-family: Helvetica, sans-serif; 
} 
</style> 

Hello.vue:

<template> 
    <div class="hello"> 
    <h1>\{{ msg }}</h1> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     msg: 'Hello Vue!' 
    } 
    } 
} 
</script> 

Pusty biały ekran, czy coś przeoczyłem?

EDIT:

HTML wejście jest tylko <div id="root"></div>, brak błędów w dziennikach konsoli i jestem całkiem pewny Hello.vue jest ładowany od console.log('test') że na konsoli pojawia się plik.

EDIT 2:

Znaleziony błąd:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in anonymous component - use the "name" option for better debugging messages.)

Czy to znaczy, że muszę użyć rozwiązanie WebPACK? Nie można użyć standardowego HTML?

ROZWIĄZANIE: importu Vue z 'vue/dist/vue.js'

Answer 1

Wystarczy, aby ułatwić życie dla ludzi szukających odpowiedzi:

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

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}) 

od autora - 2,0 standalone build means (kompilator + środowisko wykonawcze). Domyślnym eksportem pakietu NPM będzie tylko środowisko wykonawcze, ponieważ jeśli instalujesz z NPM, prawdopodobnie wstępnie skompilujesz szablony za pomocą narzędzia do kompilacji.

Answer 2

Jeśli używasz narzędzia do budowania, takiego jak browserify lub Webpack, możesz najprawdopodobniej użyć single file components, aby uniknąć takich błędów (w pojedynczych komponentach plików szablony są automatycznie kompilowane do renderowania funkcji przez vueify). Zdecydowanie powinieneś unikać szablonów nigdzie indziej. Sprawdź forum i dokumentację, aby uzyskać odpowiedzi na temat sposobów ich uniknięcia.

Ale wiem z własnego doświadczenia, że ​​nie zawsze łatwo jest znaleźć szablony w projekcie, które powodują komunikat o błędzie. Jeśli masz ten sam problem, jako tymczasowe obejście problemu, następujące powinny pomóc:

Nie należy importować „vue/dist/vue.js” (sprawdź dokumentację: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds dlaczego nie)

Zamiast ciebie powinien obsłużyć to narzędzie do budowania, którego używasz.

W moim przypadku używam trybu przeglądania, w którym można używać aliasu do tworzenia aliasu.Dodaj poniższe linie do pliku package.json:

{ 
    // ... 
    "browser": { 
    "vue": "vue/dist/vue.common.js" 
    } 
} 

dla użytkowników WebPACK wydaje trzeba dodać następujące config:

resolve: { 
    alias: {vue: 'vue/dist/vue.js'} 
}, 

Więcej informacji można znaleźć w dokumentacji: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Answer 3

Z Brunch Rozwiązałem to, dodając tę ​​zasadę w brunch-config.js:

npm: { 
    aliases: { 
     vue: "vue/dist/vue.js" 
    } 
    } 

zobaczyć http://brunch.io/docs/config#npm

To było zbudowanie komponentu Vue z wewnętrznym <template>:

<template> 
    <div> hello </div> 
</template> 

<script> 

export default { 
    name: 'Hello', 
    props: { 
    title: String, 
    }, 
} 
</script>