वू - वेबपैक vue-loader कॉन्फ़िगरेशन

Question

जब भी मैं कोई फ़ाइल बनाना चाहता हूं तो मुझे त्रुटि मिलती है। इसका क्या कारण है? ऐसा लगता है कि .vue फ़ाइल वेबपैक द्वारा पहचाने जाने योग्य नहीं है, लेकिन वेबपैक कॉन्फ़िगरेशन फ़ाइल ठीक से दिखती है। webpack त्रुटि

bundle-app.js 189 kB  1 [emitted] app 
    + 12 hidden modules 

ERROR in Unexpected token > 
@ ./app/application.js 7:11-31 

webpack.config.js

var path = require("path"); 

module.exports = { 
    context: path.join(__dirname, 'src'), 
    entry: { 
    app: './app/application.js' 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle-[name].js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     include: /src/, 
     query: { 
      presets: ["es2015"] 
     } 
     }, 
     { 
     test: /\.vue$/, 
     loader: 'vue', 
     }, 
    ] 
    }, 
    vue: { 
    loaders: { 
     js: 'babel' 
    } 
    } 
} 

package.json

"devDependencies": { 
    "webpack": "~2.2.1", 
    "babel-core": "~6.23.1", 
    "babel-loader": "~6.3.1", 
    "babel-preset-es2015": "~6.22.0", 
    "sass-loader": "~6.0.0", 
    "node-sass": "~4.5.0", 
    "extract-text-webpack-plugin": "~2.0.0-rc.3", 
    "vue-template-compiler": "~2.2.4", 
    "css-loader": "~0.27.3", 
    "vue-loader": "~11.1.4" 
    }, 
    "dependencies": { 
    "vue": "~2.2.4" 
    } 
} 

एप्लिकेशन/application.js

import Vue from 'vue' 
import App from './app.vue' 

new Vue({ 
    el: 'body', 
    component: { App } 
}) 

एप्लिकेशन/app.vue

<template> 
    <div id="app"> 
    </div> 
</template> 

<script> 

    export default { 
     data() { 
     return { 
      msg: 'Hello from vue-loader!' 
     } 
     } 
    } 

Answer 1

कुछ अतिरिक्त कॉन्फ़िगरेशन है कि आप क्या करने की जरूरत है, काम ठीक से करने के लिए लोडर रहे हैं।

मैं आपको सभी काम ठीक करने के लिए vue-cli का उपयोग करने की दृढ़ता से अनुशंसा करता हूं।

npm install -g vue-cli 
vue init webpack-simple hello 
cd hello 
npm install 
npm run dev 

मूल रूप से, अपने webpack.config.js, आप भूल गए/किए गए की त्रुटियां:

1- लोडर नाम loader: 'vue-loader' बजाय loader: 'vue' होना चाहिए।

2- resolve नामक एक कुंजी बनाएं, सामग्री सहित:

alias: { 
    vue$: 'vue/dist/vue.common.js', 
} 

3- और यह कुंजी vue: ...loader: babel, आवश्यक नहीं है।

Answer 2

क्या आप ईएसलिंट के साथ वू-क्ली का उपयोग कर रहे हैं? यदि आप करते हैं, तो आपको अंतिम और अर्धविराम में प्रत्येक तत्व ईवेंट के बाद कॉमा की आवश्यकता होती है।

import Vue from 'vue'; 
import App from './app.vue'; 

new Vue({ 
    el: 'body', 
    components: { App }, 
}); 

Answer 3

परियोजनाओं कि Vue का उपयोग में, व्यक्तियों के लिए अलग से webpack और Vue-लोडर को विन्यस्त सलाह नहीं देते। आप सीधे आधिकारिक मचान, vue-cli का उपयोग कर सकते हैं। स्वचालित रूप से कॉन्फ़िगर किए गए इन कॉन्फ़िगरेशन पर विचार करने की आवश्यकता नहीं है। vue-cli

यदि आपने अभी वू सीखना शुरू किया है, तो यहां एक एंट्री लेवल डेमो है। यद्यपि यह केवल एक छोटा सा एप्लीकेशन है, लेकिन इसमें बहुत सारे ज्ञान बिंदु शामिल हैं (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), फ्रंट-एंड, बैक-एंड समेत , डेटाबेस और अन्य साइट्स मेरे लिए आवश्यक तत्वों में से कुछ, महान महत्व सीखना, एक-दूसरे को प्रोत्साहित करना चाहते हैं!

Vue Demo