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

问题描述：

使用的Vue（^ 2.0.0-rc.6） + Browserify，入口点是index.js：Vue JS 2.0没有渲染任何东西？

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>，在控制台日志中没有错误，我敢肯定，因为该文件出现在控制台console.log('test') Hello.vue被加载。

编辑2：

发现错误：

[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.)

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

SOLUTION：导入Vue公司从 'VUE /距离/ vue.js'

只是可以肯定。当使用webpack时，建议更改webpack配置，而不是'vue/dist/vue.js'' import Vue https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources ＃standalone-vs-runtime-builds –

请使用解决方案做出回答，并接受它） –

如果你已经回答了你自己的问题，你可以发布下面的答案并接受它，或者删除你的问题。我们不在标题 – j08691

答

只是为了让生活更容易为人们寻找答案：

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

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

从笔者 - 2.0独立的构建方式（编译器+运行时）。 NPM软件包的默认导出仅为运行时，因为如果从NPM进行安装，您可能会使用构建工具预编译模板。

从文档：“注意：不要从'vue/dist/vue'导入Vue - 由于某些工具或第三方库也可能导入vue，这可能会导致应用程序加载运行时和独立构建，并导致错误。“ https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds –

是的，认真使用抽象名称，而不是硬编码路径到第三方库像那。如果您的加载程序不支持，请获得更好的加载程序。 –

答

如果您使用的是像browserify或Webpack这样的构建工具，最可能使用single file components来避免此类错误（在单个文件组件中，模板会自动编译为通过vueify呈现函数）。你绝对应该尝试在其他地方避免使用模板。查看论坛和文档以获取有关如何避免这些问题的答案。

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

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

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

就我而言，我使用的是browserify，您可以在其中使用别名来创建别名。以下添加到您的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

Aliasify似乎不适用于我使用Browserify。我注意到，新的文档建议仅使用“浏览器”：https：//vuejs.org/v2/guide/installation.html#Runtime {vue/vue/vue.common.js“ } -Compiler-vs-Runtime-only，然后我的模板出现了！ – phocks

有人可以解释'resolve'属性的作用以及错误消失的原因吗？ – Felipe

答

With Brunch我在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>

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

相关推荐