Muszę użyć dwóch zewnętrznych skryptów dla bramek płatniczych. W tej chwili oba są umieszczone w index.html
pliku. Jednak nie chcę ładować tych plików na samym początku. Bramka płatności jest potrzebna tylko wtedy, gdy użytkownik otworzy określony komponent ( using router-view
).
Czy w ogóle można to osiągnąć?
javascript
vue.js
vuejs2
vue-component
vue-router
Gijo Varghese
źródło
źródło
/public/index.html
to zrobić?Odpowiedzi:
Prostym i skutecznym sposobem rozwiązania tego problemu jest dodanie zewnętrznego skryptu do vue
mounted()
twojego komponentu. Zilustruję Cię skryptem Google Recaptcha :Źródło: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
źródło
created()
metoda nie może pobrać dokumentu, użyjmounted()
zamiast tegorecaptchaScript.async = true
przed dołączeniem do głowy.recaptchaScript.defer = true
może być również odpowiedni dla kogośPobrałem szablon HTML, który zawiera niestandardowe pliki js i jquery. Musiałem dołączyć te pliki js do mojej aplikacji. i kontynuuj z Vue.
Znalazłem tę wtyczkę, to czysty sposób dodawania zewnętrznych skryptów zarówno przez CDN, jak iz plików statycznych https://www.npmjs.com/package/vue-plugin-load-script
źródło
używając webpacka i vue loader możesz zrobić coś takiego
czeka na załadowanie zewnętrznego skryptu przed utworzeniem komponentu, więc zmienne globalne itp. są dostępne w komponencie
źródło
Czy używasz jednego z szablonów startowych Webpack dla vue ( https://github.com/vuejs-templates/webpack )? Jest już skonfigurowany z programem ładującym vue ( https://github.com/vuejs/vue-loader ). Jeśli nie używasz szablonu startowego, musisz skonfigurować pakiet internetowy i moduł ładujący vue.
Możesz następnie
import
swoje skrypty do odpowiednich (pojedynczego pliku) komponentów. Wcześniej musiszexport
ze swoich skryptów zrobić, co chcesz, doimport
komponentów.Import ES6:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html
~ Edytuj ~
Możesz importować z tych opakowań:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout
źródło
Możesz użyć pakietu vue-head , aby dodać skrypty i inne znaczniki do nagłówka komponentu vue.
To tak proste, jak:
Sprawdź ten link, aby uzyskać więcej przykładów.
źródło
Jeśli próbujesz osadzić zewnętrzne skrypty js w szablonie komponentów vue.js, wykonaj poniższe czynności:
A Vue pokazał mi ten błąd:
Szablony powinny być odpowiedzialne tylko za mapowanie stanu do interfejsu użytkownika. Unikaj umieszczania w szablonach tagów z efektami ubocznymi, na przykład z powodu braku ich analizy.
<script type="application/javascript" defer src="..."></script>
Możesz zauważyć ten
defer
atrybut. Jeśli chcesz dowiedzieć się więcej, obejrzyj ten film autorstwa Kyle'aźródło
Możesz załadować potrzebny skrypt za pomocą rozwiązania opartego na obietnicy:
Pamiętaj, że
this.$root
jest to trochę hakerskie i zamiast tego powinieneś używać rozwiązania vuex lub eventHub dla wydarzeń globalnych.Możesz zrobić z powyższego komponent i użyć go wszędzie tam, gdzie jest to potrzebne, załaduje skrypt tylko wtedy, gdy zostanie użyty.
źródło
Można to po prostu zrobić w ten sposób.
źródło
Aby zachować czyste komponenty, możesz użyć miksów.
W swoim komponencie zaimportuj zewnętrzny plik mieszany.
źródło
Najlepsza odpowiedź dotycząca tworzenia tagu w zamontowanym jest dobra, ale ma pewne problemy: jeśli zmienisz łącze wiele razy, będzie on powtarzał tworzenie tagu w kółko.
Stworzyłem więc skrypt, aby rozwiązać ten problem, i jeśli chcesz, możesz usunąć tag.
Jest to bardzo proste, ale pozwala zaoszczędzić czas na samodzielnym tworzeniu.
Możesz go używać w ten sposób:
źródło
Możesz użyć programu ładującego vue i zakodować komponenty w ich własnych plikach (komponenty jednoplikowe). Umożliwi to dołączanie skryptów i css na podstawie komponentów.
źródło
Najprostszym rozwiązaniem jest dodanie skryptu do
index.html
pliku projektu vueindex.html:
źródło