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>

空白的白色屏幕,我错过了什么吗？

编辑:

条目html只是<div id="root"></div>,控制台日志没有错误,我很确定Hello.vue已加载,因为console.log('test')该文件出现在控制台上.

编辑2:

发现错误:

[Vue警告]:您正在使用Vue的仅运行时版本,其中模板选项不可用.将模板预编译为渲染函数,或使用包含编译器的构建.(在匿名组件中找到 - 使用"name"选项可以更好地调试消息.)

这是否意味着我必须使用webpack解决方案？无法使用标准HTML？

解决方案:从'vue/dist/vue.js'导入Vue

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这样的构建工具,则很可能使用单个文件组件来避免此类错误(在单个文件组件中,模板会自动编译为通过vueify呈现函数).你绝对应该尝试避免其他地方的模板.查看论坛和文档,了解有关如何避免它们的答案.

但我从我自己的经验中知道,在项目中找到导致错误消息的模板并不总是那么容易.如果您遇到同样的问题,作为临时解决方法,以下内容应该有所帮助:

你不应该导入'vue/dist/vue.js'(查看文档:https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds why不)

相反,你应该在你正在使用的构建工具中处理它.

就我而言,我使用的是browserify,您可以使用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

对于Vue 3.4.0您可以在名为项目的根目录中添加一个新文件

vue.config.js 并添加以下内容。

module.exports = {
  runtimeCompiler: true
}

下次启动应用程序时，您会看到

在204
毫秒内成功编译20:46:46

App running at: