2017-12-27 3 views
10

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> 
+0

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. –

+0

@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. –

+0

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 –

Odpowiedz

1

Docs a artykuł alligator.io nie wyjaśniają, ale aby pracować , vue-custom-element nadal wymaga bibliotek Vue.js i vue-custom-element.

Więc musisz użyć <script> zawiera ten pakiet internetowy generuje w index.html.


Znaleziony tutorial, który wspomina, że: http://vuetips.com/vue-web-components

Ta implementacja wymaga podstawowych plików Vue.js i Biblioteki vue-niestandardowych elementów, które należy uwzględnić w swojej strony.

wspomina również https://github.com/kartsims/vue-customelement-bundler który jest szablon, który buduje wszystko w jednym .js pliku.

+0

Nie jestem pewien, czy dobrze cię zrozumiałem, ale starałem się postępować zgodnie z twoją radą i dodałem ścieżki biblioteki do index.html w tagach skryptu. Nadal nie działa. Zaktualizowałem swoje pytanie za pomocą mojego obecnego pliku index.html. Proszę spojrzeć. –

+0

@DavidJ. Miałem na myśli ścieżki stworzone przez webpack w '/ dist/index.html' tam można zobaczyć'