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的仅运行时版本模板选项不可用。预编译模板到渲染函数，或使用包含编译器的构建。（在发现匿名组件 - 使用＆＃34;名称＆＃34;更好的调试选项邮件。）

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

解：从＆＃39; vue / dist / vue.js＆＃39;

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

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

您不应导入＆＃39; vue / dist / vue.js＆＃39; （查看文档：{{3}}为什么不）

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

在我的情况下，我使用browserify，您可以使用aliasify来创建别名。将以下内容添加到package.json文件中：

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

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

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

更多信息可在文档中找到：https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds

Answer 3

对于..\..\，您可以在名为的项目的根目录中添加新文件

Vue 3.4.0并将以下内容添加到其中。

vue.config.js

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

在204毫秒内成功编译
20:46:46
module.exports = {
  runtimeCompiler: true
}

Answer 4

使用早午餐，我通过在brunch-config.js中添加此规则解决了这个问题：

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

请参阅http://brunch.io/docs/config#npm

使用内部<template>：

构建Vue组件

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

<script>

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

Vue JS 2.0没有渲染任何东西？

4 个答案: