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'

來源

2016-09-14 user2002495

只是可以肯定。當使用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進行安裝，您可能會使用構建工具預編譯模板。

來源

2016-09-23 03:03:55 dima

從文檔：「注意：不要從'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

來源

2016-10-13 04:25:50 gwildu

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>

來源

2017-11-01 00:37:46 Ehvince

Vue JS 2.0沒有渲染任何東西？

回答

相關問題