Vue js 2.0 ничего не рендеринг?

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

Здравствуйте.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>, никаких ошибок в журналах консоли,и я уверен, что Привет.Вью загружается с console.log('test') этот файл появляется на консоли.

EDIT 2:

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

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

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

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

31
babel browserify javascript vue.js vuejs2

3 ответов

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

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

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

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

40

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

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

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

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

В моем случае, я использую browserify, где вы можете использовать aliasify для создание псевдонима. Добавьте к вашему :

{
  // ...
  "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

26

С Бранч я решил это, добавив Это правило в 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>
0