2017-12-27 15 views
10

में स्टैंडअलोन जे एस फ़ाइलें निर्माण करने में नाकाम रहने मैं दर्ज की और यहाँ कस्टम तत्वों का उपयोग करने के दिशा निर्देश का पालन किया।Vue कस्टम तत्व जिला

मैं जिले निर्देशिका में element.js नामक एक पैक वेब घटक फ़ाइल प्राप्त करने की उम्मीद जब मैं

npm run build 

चलाते हैं। कुछ भी नहीं होता है, यद्यपि। क्या किसी को पता है कि क्या कोई अतिरिक्त कदम आवश्यक है? दस्तावेज यह स्पष्ट नहीं करता है।

यह उत्पादन अपने प्रोजेक्ट में निम्न फ़ाइलें:

<template> 
    <div id="app"> 
    <example myProp="I can pass props!"></example> 

    </div> 
</template> 

<script> 
import Example from './components/example.Vue' 

export default { 
    name: 'app', 
    components: { 
    Example 
    } 
} 
</script> 

<style> 
</style> 

main.js

// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
import Vue from 'vue' 
import App from './App' 
import vueCustomElement from 'vue-custom-element' 

Vue.config.productionTip = false 

Vue.use(vueCustomElement); 
/* eslint-disable no-new */ 

import Example from './components/Example.vue'; 

// Configure Vue to ignore the element name when defined outside of Vue. 
Vue.config.ignoredElements = [ 
    'example-component' 
]; 

// Enable the plugin 
Vue.use(vueCustomElement); 

// Register your component 
Vue.customElement('example-component', Example, { 
    // Additional Options: https://github.com/karol-f/vue-custom-element#options 
}); 


new Vue({ 
    el: '#app', 
    template: '<App/>', 
    components: { App } 
}) 

घटकों/example.vue

<template> 
    <p>Dynamic prop value: {{myProp}}</p> 
</template> 

<script> 
export default { 
    props: ['myProp'] 
} 
</script> 

package.json

{ 
    "name": "example", 
    "version": "1.0.0", 
    "description": "A Vue.js project", 
    "author": "", 
    "private": true, 
    "scripts": { 
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 
    "start": "npm run dev", 
    "build": "node build/build.js" 
    }, 
    "dependencies": { 
    "vue": "^2.5.2", 
    "vue-custom-element": "^2.0.0" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^7.1.2", 
    "babel-core": "^6.22.1", 
    "babel-helper-vue-jsx-merge-props": "^2.0.3", 
    "babel-loader": "^7.1.1", 
    "babel-plugin-syntax-jsx": "^6.18.0", 
    "babel-plugin-transform-runtime": "^6.22.0", 
    "babel-plugin-transform-vue-jsx": "^3.5.0", 
    "babel-preset-env": "^1.3.2", 
    "babel-preset-stage-2": "^6.22.0", 
    "chalk": "^2.0.1", 
    "copy-webpack-plugin": "^4.0.1", 
    "css-loader": "^0.28.0", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "file-loader": "^1.1.4", 
    "friendly-errors-webpack-plugin": "^1.6.1", 
    "html-webpack-plugin": "^2.30.1", 
    "node-notifier": "^5.1.2", 
    "optimize-css-assets-webpack-plugin": "^3.2.0", 
    "ora": "^1.2.0", 
    "portfinder": "^1.0.13", 
    "postcss-import": "^11.0.0", 
    "postcss-loader": "^2.0.8", 
    "rimraf": "^2.6.0", 
    "semver": "^5.3.0", 
    "shelljs": "^0.7.6", 
    "uglifyjs-webpack-plugin": "^1.1.1", 
    "url-loader": "^0.5.8", 
    "vue-loader": "^13.3.0", 
    "vue-style-loader": "^3.0.1", 
    "vue-template-compiler": "^2.5.2", 
    "webpack": "^3.6.0", 
    "webpack-bundle-analyzer": "^2.9.0", 
    "webpack-dev-server": "^2.9.1", 
    "webpack-merge": "^4.1.0" 
    }, 
    "engines": { 
    "node": ">= 4.0.0", 
    "npm": ">= 3.0.0" 
    }, 
    "browserslist": [ 
    "> 1%", 
    "last 2 versions", 
    "not ie <= 8" 
    ] 
} 

कस्टम तत्व और Vue पुस्तकालयों के लिए स्क्रिप्ट फ़ाइलें सहित के बाद, मेरे index.html इस तरह दिखता है:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <title>example</title> 
    <script src="vue/dist/vue.min.js"></script> 
    <script src="vue-custom-element/dist/vue-custom-element.js"></script> 

    </head> 

    <body> 
    <div id="app"></div> 
    <!-- built files will be auto injected --> 
    </body> 

</html> 
+0

क्या आप थोड़ा और विशिष्ट हो सकते हैं? 1) "कुछ नहीं होता" से आपका क्या मतलब है? आप क्या होने की उम्मीद करते थे, क्या हुआ? क्या कंसोल कुछ नहीं करता? '/ Dist' में कुछ भी नहीं बनाया गया था? 2) निर्माण प्रक्रिया के अंत में आप क्या प्राप्त करने की उम्मीद करते हैं? जिस तरह से आपने इसे अभी सेट किया है, यह एक पृष्ठ में उलझने के लिए एक बंडल घटक नहीं होगा - यह एक बंडल वू एप्लिकेशन होगा जिसमें * एक कस्टम तत्व शामिल है, लेकिन इसका उपयोग नहीं करता है। Vue-cli वेबपैक टेम्पलेट का मतलब है लिखने के लिए, एकल घटक नहीं। –

+0

@LinusBorg मैं 'npm रन बिल्ड 'की अपेक्षा करता हूं' example.js' को'/dist' में आउटपुट करने के लिए, जो सामान्य रूप से करता है उसके अलावा। Alligator.io पर दस्तावेज़ स्पष्ट रूप से बताता है कि, मेरे प्रश्न में शामिल फ़ाइलों को देखते हुए, "... एक स्टैंडअलोन स्क्रिप्ट के निर्माण के बाद, आप किसी भी वेबपृष्ठ पर उस स्क्रिप्ट को जोड़ने में सक्षम होना चाहिए और इसे उदाहरण-घटक के रूप में प्रस्तुत करना चाहिए अपेक्षित होना।" मेरा मतलब यह नहीं है कि वेबपैक बिल्ड बिल्कुल काम नहीं करता है। –

+0

खैर, वेबपैक यह नहीं जानता कि आप एक अलग 'example.js' फ़ाइल चाहते हैं। वेबपैक कॉन्फ़िगरेशन का कहना है कि इसे 'main.js' को'/dist/app.js' में संकलित करना चाहिए, और कुछ नहीं। जब मैं कहता हूं कि वेबपैक टेम्पलेट एक ऐप बनाने के लिए सेट किया गया है, तो स्टैंडअलोन घटक नहीं है। मैं एक छोटा सा जवाब लिखने और लिखने की कोशिश करूंगा, लेकिन अगर आप ऐसा करना चाहते हैं तो बदलने के लिए बहुत कुछ है, अगर मैं –

उत्तर

1

डॉक्स और alligator.io लेख समझा नहीं है, लेकिन क्रम में काम करने के लिए , एक vue-custom-element को अभी भी Vue.js और vue-custom-element लाइब्रेरी की आवश्यकता है।

तो आपको <script> का उपयोग करना होगा जिसमें वेबपैक index.html में उत्पन्न होता है। http://vuetips.com/vue-web-components

इस कार्यान्वयन अपने पृष्ठ में शामिल किए जाने की आवश्यकता है Vue.js कोर फ़ाइलें और Vue-कस्टम तत्व पुस्तकालय:


एक ट्यूटोरियल जो कहा गया है कि मिले।

यह भी https://github.com/kartsims/vue-customelement-bundler का उल्लेख है जो कि एक ही .js फ़ाइल में सब कुछ बनाता है एक टेम्पलेट है।

+0

मुझे यकीन नहीं है कि मैंने आपको सही तरीके से समझा है, लेकिन मैंने आपकी सलाह का पालन करने की कोशिश की और स्क्रिप्ट टैग में index.html में लाइब्रेरी पथ जोड़े। यह अभी भी काम नहीं करता है। मैंने अपने वर्तमान index.html के साथ अपना प्रश्न अपडेट किया। कृपया देख लीजिये। –

+0

@ डेविड जे। मेरा मतलब था वेबपैक द्वारा '/ dist/index.html' में बनाए गए पथ, आप ऐप, विक्रेता और मैनिफेस्ट के लिए '

संबंधित मुद्दे