वू जेएस 2.0 कुछ भी प्रस्तुत नहीं कर रहा है?

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> 

खाली सफेद स्क्रीन, क्या मुझे कुछ याद आया?

संपादित करें:

प्रविष्टि एचटीएमएल सिर्फ <div id="root"></div>, कंसोल लॉग पर कोई त्रुटि है, और मैं यकीन है कि Hello.vue console.log('test') उस फ़ाइल कंसोल पर दिखाई देता है के बाद से भरी हुई है हूँ।

संपादित करें 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 समाधान का उपयोग करने है:

त्रुटि मिला? मानक एचटीएमएल का उपयोग नहीं कर सकते?

समाधान: 'Vue/जिले/vue.js'

Answer 1

बस जीवन जवाब की तलाश में लोगों के लिए आसान बनाने के लिए से आयात Vue:

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

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

लेखक से - 2.0 स्टैंडअलोन बिल्ड का मतलब है (कंपाइलर + रनटाइम)। एनपीएम पैकेज का डिफ़ॉल्ट निर्यात केवल रनटाइम होगा, क्योंकि यदि एनपीएम से स्थापित किया जा रहा है, तो संभवतः आप बिल्ड टूल के साथ टेम्पलेट को पूर्व-संकलित करेंगे।

Answer 2

यदि आप ब्राउज़र या वेबपैक जैसे निर्माण उपकरण का उपयोग कर रहे हैं, तो आप शायद ऐसी त्रुटियों से बचने के लिए single file components का उपयोग कर सकते हैं (एकल फ़ाइल घटकों में टेम्पलेट स्वचालित रूप से कार्यों को प्रस्तुत करने के लिए संकलित किए जाते हैं)। आपको निश्चित रूप से कहीं और टेम्पलेट से बचने की कोशिश करनी चाहिए। उनसे बचने के तरीके के उत्तर के लिए फोरम और दस्तावेज़ीकरण की जांच करें।

लेकिन मुझे अपने अनुभव से पता है कि आपकी परियोजना में टेम्पलेट्स ढूंढना हमेशा आसान नहीं होता है, जो त्रुटि संदेश उत्पन्न कर रहे हैं। आप एक ही समस्या हो रही है, एक अस्थायी समाधान के रूप में, निम्नलिखित की मदद करनी चाहिए:

आप आयात नहीं करना चाहिए 'Vue/जिले/vue.js' (जाँच प्रलेखन: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds क्यों नहीं)

इसके बजाय आप उस उपकरण को संभालना चाहिए जिसे आप उपयोग कर रहे हैं।

मेरे मामले में, मैं ब्राउज़र का उपयोग कर रहा हूं जहां आप उपनाम बनाने के लिए उपनाम का उपयोग कर सकते हैं।अपने package.json फ़ाइल में निम्न जोड़ें:

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

Webpack उपयोगकर्ताओं के लिए यह लगता है आप अपनी config के लिए निम्नलिखित जोड़ने के लिए:

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

अधिक जानकारी प्रलेखन में पाया जा सकता है: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Answer 3

ब्रंच मैंने इस नियम को 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>