57

使用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)
})

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

你好.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

4

4 回答 4

69

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

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

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

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

于 2016-09-23T03:03:55.653 回答
37

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

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

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

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

就我而言，我使用的是 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

于 2016-10-13T04:25:50.070 回答
8

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

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

module.exports = {
  runtimeCompiler: true
}

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


204ms 20:46:46编译成功

App running at:
于 2019-02-14T15:22:18.557 回答
1

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

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

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

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

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

<script>

 export default {
   name: 'Hello',
   props: {
     title: String,
   },
 }
</script>
于 2017-11-01T00:37:46.737 回答