Vue Niestandardowe Element braku zbudować samodzielne pliki JS w Dist

I po kierunkach dla rejestracji i korzystania z niestandardowych elementów tutaj:Vue Niestandardowe Element braku zbudować samodzielne pliki JS w Dist

https://alligator.io/vuejs/custom-elements/

używam standardowego szablonu WebPACK dla Vue.

Kiedy biegnę

npm run build

spodziewam się dostać spakowanego pliku komponentu internetowej o nazwie element.js w katalogu dist. Nic się jednak nie dzieje. Czy ktoś wie, czy potrzebne są dodatkowe kroki? Dokumentacja nie wyjaśnia tego.

Ten produkowany następujące pliki w moim projekcie:

<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 } 
})

komponenty/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" 
    ] 
}

Po tym pliki skryptów dla elementu niestandardowego i bibliotek Vue, mój index.html wygląda następująco:

<!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>

Źródło

2017-12-27 David J.

Czy mógłbyś być bardziej konkretny? 1) co rozumiesz przez "nic się nie dzieje"? Czego się spodziewałeś, co się stało? czy konsola nic nie zrobiła? Czy nic nie było utworzone w '/ dist'? 2) Czego oczekujesz po zakończeniu procesu kompilacji? Sposób, w jaki ustawiłeś to teraz, Nie będzie to dołączony komponent do wstawiania na stronie - będzie to pakiet aplikacji Vue, która * zawiera * jeden element niestandardowy, ale go nie używa. Szablon webue vue-cli jest przeznaczony do pisania aplikacji, a nie pojedynczych komponentów. –

@LinusBorg Oczekuję, że 'npm run build' wypisze' example.js' w '/ dist', oprócz tego, co zwykle robi. Dokument na alligator.io wyraźnie stwierdza, że biorąc pod uwagę pliki, które zawarłem w moim pytaniu, "... po zbudowaniu do samodzielnego skryptu, powinieneś być w stanie dodać ten skrypt do dowolnej strony internetowej i sprawić, że będzie on wyświetlał przykładowy komponent jako spodziewany." Nie chodzi mi o to, że kompilacja pakietu sieciowego nie działa w ogóle. –

Cóż, Webpack nie wie, że chcesz osobny plik 'example.js'. Konfiguracja webpacka mówi, że powinna skompilować 'main.js' do'/dist/app.js', nic więcej. To właśnie mam na myśli, gdy mówię, że szablon webpacka jest skonfigurowany do budowania aplikacji, a nie samodzielnego komponentu. Spróbuję napisać krótką odpowiedź, ale jest wiele do zrobienia, jeśli chcesz to zrobić, nie mam pojęcia, czy mi się uda –

Vue Niestandardowe Element braku zbudować samodzielne pliki JS w Dist

Odpowiedz

Powiązane problemy