使用 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>
白屏,我漏掉了什么吗?
编辑:
入口HTML只是<div id="root"></div>
,控制台日志没有错误,我很确定Hello.vue已加载,因为该文件的console.log('test')
出现在控制台上。
编辑2:
找到错误:
[Vue warn]: 您正在使用 Vue 的运行时版本,其中“template”选项未提供。请将模板预编译为渲染函数,或使用包含编译器的构建。 (位于匿名组件中 - 使用"name"选项以获得更好的调试信息。)
这是不是意味着我必须使用webpack解决方案?不能使用标准HTML吗?
解决方案:导入Vue from 'vue/dist/vue.js'
import Vue from 'vue/dist/vue.js'
。请参考https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds。 - Raj Kamalimport Vue from 'vue'
而不是import Vue from 'vue/dist/vue'
。 - GarouDan