Javascript Vue JS 2.0 不渲染任何东西？

Vue JS 2.0 not rendering anything?

提问by user2002495

Using Vue (^2.0.0-rc.6)+ Browserify, entry point is index.js:

使用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:

应用程序.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:

你好.vue：

<template>
  <div class="hello">
    <h1>\{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

Blank white screen, did I miss something?

空白的白屏，我错过了什么吗？

EDIT:

编辑：

The entry html is just <div id="root"></div>, no errors on console logs, and I'm pretty sure Hello.vue is loaded since console.log('test')that file appears on console.

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

EDIT 2:

编辑2：

Found the error:

发现错误：

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in anonymous component - use the "name" option for better debugging messages.)

[Vue 警告]：您正在使用 Vue 的仅运行时构建，其中模板选项不可用。要么将模板预编译为渲染函数，要么使用包含编译器的构建。（在匿名组件中找到 - 使用“名称”选项以获得更好的调试消息。）

Does this mean I have to use webpack solution? Cannot use standard HTML?

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

SOLUTION: Import Vue from 'vue/dist/vue.js'

解决方案：从“vue/dist/vue.js”导入Vue

回答by dima

Just to make life easier for folks looking for the answer:

只是为了让寻找答案的人们的生活更轻松：

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

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

From the author -- 2.0 standalone build means (compiler + runtime). The default export of the NPM package will be runtime only, because if installing from NPM, you will likely pre-compile the templates with a build tool.

来自作者——2.0 独立构建意味着（编译器 + 运行时）。NPM 包的默认导出将仅在运行时进行，因为如果从 NPM 安装，您可能会使用构建工具预编译模板。

回答by gwildu

If you are using a build tool like browserify or Webpack, you can most probably use single file componentsto avoid such errors (in single file components the templates are automatically compiled to render functions by vueify). You definitely should try to avoid templates anywhere else. Check the forum and documentation for answers about how to avoid them.

如果您使用的是像 browserify 或 Webpack 这样的构建工具，您很可能可以使用单文件组件来避免此类错误（在单文件组件中，模板会被 vueify 自动编译为呈现函数）。您绝对应该尽量避免在其他任何地方使用模板。查看论坛和文档以获取有关如何避免它们的答案。

But I know from my own experience that it is not always easy to find the templates in your project, that are causing the error message. If you are having the same problem, as a temporary workaround, the following should help:

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

You should not import 'vue/dist/vue.js' (check the documentation: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-buildswhy not)

你不应该导入'vue/dist/vue.js'（查看文档：https: //github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds为什么不是）

Instead you should handle that in the build tool you are using.

相反，您应该在您使用的构建工具中处理它。

In my case, I'm using browserify where you can use aliasify for creating the alias. Add the following to your package.jsonfile:

就我而言，我使用的是 browserify，您可以在其中使用 aliasify 创建别名。将以下内容添加到您的package.json文件中：

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

for Webpack users it seems you have to add the following to your config:

对于 Webpack 用户，您似乎必须将以下内容添加到您的配置中：

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},

More information can be found in the documentation: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

更多信息可以在文档中找到：https: //vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

回答by Krishnadas PC

For Vue 3.4.0You can add a new file at the root directory of the project named

ForVue 3.4.0你可以在项目的根目录下添加一个名为的新文件

vue.config.jsand add the following into it.

vue.config.js并将以下内容添加到其中。

module.exports = {
  runtimeCompiler: true
}

Next time when you start the app you can see

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

Compiled successfully in 204ms
20:46:46

App running at:

204ms
20:46:46编译成功

App running at:

回答by Ehvince

With BrunchI resolved this by adding this rule in brunch-config.js:

使用早午餐，我通过在brunch-config.js以下内容中添加此规则来解决此问题：

  npm: {
    aliases: {
      vue: "vue/dist/vue.js"
    }
  }

see http://brunch.io/docs/config#npm

见http://brunch.io/docs/config#npm

It was to build a Vue component with an inner <template>:

它是构建一个带有内部的 Vue 组件<template>：

<template>
  <div> hello </div>
</template>

<script>

 export default {
   name: 'Hello',
   props: {
     title: String,
   },
 }
</script>