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

Использование 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'), этот файл появляется на консоли.

ИЗМЕНИТЬ 2:

Обнаружена ошибка:

[Vue warn]: вы используете встроенную среду Vue, где вариант шаблона недоступен. Либо предварительно скомпилируйте шаблоны в функции рендеринга или использовать встроенную компилятором сборку. (найти в анонимный компонент - используйте опцию "имя" для лучшей отладки сообщения.)

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

Решение: Импортировать Vue из 'vue/dist/vue.js'

Ответ 1

Просто чтобы облегчить жизнь людям, ищущим ответ:

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

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

От автономного средства сборки author - 2.0 (компилятор + время выполнения). Экспорт по умолчанию пакета NPM по умолчанию будет выполняться только потому, что при установке из NPM вы, вероятно, предварительно скомпилируете шаблоны с помощью инструмента построения.

Ответ 2

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

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

Вам не следует импортировать 'vue/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

Ответ 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>