Vue JS 2.0没有呈现任何内容?

JavaScript

JinJinDavaid

2020-03-11

使用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的仅运行时版本,而模板选项不可用。可以将模板预编译为渲染函数,也可以使用包含编译器的内部版本。(在匿名组件中找到-使用“名称”选项以获得更好的调试消息。)

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

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

第584篇《Vue JS 2.0没有呈现任何内容?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
TomEva 2020.03.11

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

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

module.exports = {
  runtimeCompiler: true
}

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

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

App running at:

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android