Vue JS 2.0 ничего не делает?

Question

Используя Vue (^ 2.0.0-rc.6) + Browserify, точка входа 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> 

Пустой белый экран, я что-то пропустил?

EDIT:

Запись HTML просто <div id="root"></div>, никакие ошибки на консоли журналов, и я уверен, что Hello.vue загружается так console.log('test'), что на консоли появляется файл.

EDIT 2:

Нашли ошибку:

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

Означает ли это, что я должен использовать WebPack решение? Нельзя использовать стандартный HTML?

РЕШЕНИЕ: Импорт Вью из 'Vue/DIST/vue.js'

Answer 1

Просто, чтобы сделать жизнь проще для людей, которые ищут ответ:

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

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

От автора - 2,0 автономные средства сборки (компилятор + время выполнения). По умолчанию экспорт пакета NPM будет выполняться только в режиме исполнения, потому что при установке из NPM вы, вероятно, предварительно скомпилируете шаблоны с помощью инструмента построения.

Answer 2

Если вы используете инструмент построения, такой как browserify или Webpack, вы можете, скорее всего, использовать single file components, чтобы избежать таких ошибок (в отдельных файловых компонентах шаблоны автоматически компилируются для визуализации функций с помощью vueify). Вы определенно должны стараться избегать шаблонов в другом месте. Проверьте форум и документацию на ответы о том, как их избежать.

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

Вы не должны импортировать «вю/DIST/vue.js» (проверьте документацию: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds почему нет)

Вместо вас должен обрабатывать это в инструменте построения, который вы используете.

В моем случае я использую браузер, где вы можете использовать aliasify для создания псевдонима.Добавьте следующее в файл package.json:

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

для пользователей WebPack, кажется, вы должны добавить следующие строки в конфигурации:

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

Более подробную информацию можно найти в документации: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Answer 3

С Brunch Я решил это, добавив это правило в brunch-config.js:

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

см http://brunch.io/docs/config#npm

Это было создать компонент Vue с внутренним <template>:

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

<script> 

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