vue 구성 요소 내에서 사용하기 위해 javascript 파일을 가져오는 중
js 플러그인을 사용해야 하는 프로젝트를 진행하고 있습니다.vue를 사용하고 플러그인 기반 로직을 처리하는 구성 요소가 있으므로 플러그인을 초기화하려면 vue 구성 요소 내에서 js 플러그인 파일을 가져와야 합니다.
이전에는 다음과 같이 마크업 내에서 처리되었습니다.
<script src="//api.myplugincom/widget/mykey.js
"></script>
다음과 같이 시도했지만 컴파일 시간 오류가 발생하였습니다.
마이 컴포넌트표시하다
import Vue from 'vue';
import * from '//api.myplugincom/widget/mykey.js';
export default {
data: {
질문입니다.vue 컴포넌트 내에서 사용할 수 있도록 이 Javascript 파일을 Import하는 적절한 방법은 무엇입니까?
외부 JavaScript 파일 포함
(외부) JavaScript를 Vue 컴포넌트의 마운트 후크에 포함시켜 보십시오.
<script>
export default {
mounted() {
const plugin = document.createElement("script");
plugin.setAttribute(
"src",
"//api.myplugincom/widget/mykey.js"
);
plugin.async = true;
document.head.appendChild(plugin);
}
};
</script>
로컬 JavaScript 파일 가져오기
Vue 컴포넌트에 로컬 JavaScript를 Import하는 경우 다음과 같이 Import할 수 있습니다.
마이 컴포넌트표시하다
<script>
import * as mykey from '../assets/js/mykey.js'
export default {
data() {
return {
message: `Hello ${mykey.MY_CONST}!` // Hello Vue.js!
}
}
}
</script>
프로젝트 구조는 다음과 같습니다.
src
- assets
- js
- mykey.js
- components
MyComponent.vue
또한 변수 또는 함수를 mykey.js로 내보낼 수 있습니다.
export let myVariable = {};
export const MY_CONST = 'Vue.js';
export function myFoo(a, b) {
return a + b;
}
버전 확인 : Vue.js 버전 확인.2.6.10
.
import * from '{path}/mykey.js'.
import script （ script ） 。
<script src="//api.myplugincom/widget/mykey.js"></script><head>이치노
브라우저 방식(태그 포함)으로 가져오는 스크립트의 경우 일반적으로 일부 변수를 글로벌하게 사용할 수 있습니다.
이것들은 수입할 필요가 없습니다.그냥 쓸 수 있을 거예요.
된 JetBrains 등을 는, 「」( 「JetBrains IDE」)를 추가할 수 ./* global globalValueHere */는 ''는 ''는 '''는''는 '''는''는 '''는'''는 '''는'''는 '''는'''는 '''는'''는 ''''는''''는 ''''''''''필수는 아니지만 "정의되지 않은" 구불구불한 선이 사라집니다.
예를 들어 다음과 같습니다.
/* global Vue */
CDN에서 Vue를 꺼낼 때 사용하는 것입니다(직접 사용하는 것이 아니라).
그 이상은 평소처럼 사용하시면 됩니다.
모든 것을 만, 에는 「」가 포함되어 .document.write그 후, Medium에서 포스트 서브스크라이브에 관한 짧은 기사를 발견해, 간단하게 수정해, 문제를 해결했습니다.
npm i postscribe --save
그리고 거기서부터 갈 수 있었어요.eslint에서 불필요한 이스케이프를 디세블로 하고 #gist를 템플릿의 단일 루트 요소 ID로 사용했습니다.
import postscribe from 'postscribe';
export default {
name: "MyTemplate",
mounted: function() {
postscribe(
"#gist",
/* eslint-disable-next-line */
`<script src='...'><\/script>`
);
},
이 문서는 https://medium.com/ @gaute.http/how-to-add-a-script-tag-in-a-vue-component-34f57b2fe9bd를 참조하십시오.
외부 JS 파일을 포함하여 로드된 스크립트 내에서 jQuery 프로토타입 메서드에 액세스하는 데 문제가 있는 모든 사용자에게 적합합니다.
바닐라 JS, React 및 Angular에서 본 샘플 프로젝트는 단순히 다음을 사용하고 있었습니다.
$("#someId").somePlugin(options)또는window.$("#someId").somePlugin(options)
그러나 VueJS 컴포넌트에서 이러한 컴포넌트 중 하나를 시도하면 다음과 같은 메시지가 나타납니다.
오류: _webpack_provided_window_dot$(...).일부 플러그니 함수가 아닙니다.
리소스가 로드된 후 창 개체를 조사했더니 창 자체를 반환하는 읽기 전용 속성에서 jQuery 프로토타입 메서드를 찾을 수 있었습니다.
window.self.$("#someId").somePlugin(options)
많은 예에서는 외부 JS 파일을 VueJ에 로드하는 방법을 보여 주지만 실제로 구성 요소 내에서 jQuery 프로토타입 메서드를 사용하지 않습니다.
언급URL : https://stackoverflow.com/questions/48426972/importing-javascript-file-for-use-within-vue-component
'programing' 카테고리의 다른 글
| Vuex 스토어가 이미 생성된 후 수동으로 Getter/mutation을 추가하는 방법 (0) | 2022.07.12 |
|---|---|
| Vuejs 2는 이벤트 버스로부터 수신된 데이터를 사용하여 변수에 데이터를 할당합니다. (0) | 2022.07.12 |
| VueJ - Vuex 상태가 업데이트될 때 구성 요소가 업데이트되지 않음 (0) | 2022.07.12 |
| "이진수 비트 연산자와 함께 부호 있는 정수 피연산자 사용" - 부호 없는 쇼트 사용 시 (0) | 2022.07.12 |
| C에서 동적으로 할당된 메모리의 크기를 확인합니다. (0) | 2022.07.12 |