반응형
기존 웹 페이지 내에서 npm 없이 구성 요소 사용
저는 Vue.js에 익숙하지 않고 대부분의 작업은 기존 LAMP 환경에서 수행합니다.지금까지 시도된 vue 컴포넌트가 연결되어 작동하지 않는 것 같습니다.누구라도 부탁할 수 있어?
- 레거시 LAMP 환경에 vue 컴포넌트를 설치하기 위한 샘플 프로세스 제공
- vue 구성 요소를 로드하는 방법을 보여 주는 간단한 html 템플릿을 제공합니다.
조언해 주셔서 감사합니다.
레거시 컨텍스트이기 때문에 npm/webpack/babel을 사용하지 않을 수 있습니다.이 경우 필요한 모든 패키지를<script>태그를 지정합니다.
- 프로세스:
- 필요한 컴포넌트를 찾습니다.
- Import에 필요한 순서에 대해서는, 문서를 참조해 주세요.
- 보통은
<script>태그(및 CSS)<link>style) 뒤에 (항상 그렇지는 않지만) 설정하는 몇 가지 단계가 있습니다. - 드물게 lib가 다음 사용 방법을 제공하지 않는 경우가 있습니다.
<script>이 경우 를 사용해 보십시오.<script src="https://unkpg.com/NODE-PACKAGE-NAME">직접 사용할 수 있는지 알아보겠습니다.
- 보통은
예:
- 자신의 것을 선언
<custom-comp>컴포넌트를 사용하여 글로벌하게 등록합니다.Vue.component.
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<custom-comp v-bind:myname="name"></custom-comp>
</div>
<template id="cc">
<p>I am the custom component. You handled me {{ myname }} via props. I already had {{ myown }}.</p>
</template>
<script>
Vue.component('custom-comp', {
template: '#cc',
props: ['myname'],
data() {
return {
myown: 'Eve'
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js',
name: 'Alice'
}
});
</script><script src="https://unpkg.com/vue"></script>
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-card title="Card Title"
img-src="https://lorempixel.com/600/300/food/5/"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<p class="card-text">
Some quick example text to build on the card title.
</p>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
<script>
new Vue({
el: '#app'
});
</script>- 마지막으로 NPM 없이 사용하는 방법에 대한 구체적인 지침이 표시되지 않는 서드파티 컴포넌트를 사용합니다.아래 데모에서는 vue2-datepicker를 보여 줍니다.사용방법에 대한 자세한 설명은 없습니다.
<script>단, Readme를 보면 컴포넌트는 보통 다음 컴포넌트를 내보냅니다.DatePicker변수.사용 후 사용<script src="https://unpkg.com/vue2-datepicker">컴포넌트를 로딩하여 사용하기 위해 등록합니다.Vue.component('date-picker', DatePicker.default);의 필요성.default다르다.기타 컴포넌트의 경우Vue.component('comp-name', ComponentName);(의 일부ComponentName.default)는, 직접 동작할 수 있습니다.
// After importing the <script> tag, you use this command to register the component
// so you can use. Sometimes the components auto-register and this is not needed
// (but generally when this happens, they tell in their docs). Sometimes you need
// to add `.default` as we do below. It's a matter of trying the possibilities out.
Vue.component('date-picker', DatePicker.default);
new Vue({
el: '#app',
data() {
return {
time1: '',
time2: '',
shortcuts: [
{
text: 'Today',
start: new Date(),
end: new Date()
}
]
}
}
})<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue2-datepicker"></script>
<div id="app">
<div>
<date-picker v-model="time1" :first-day-of-week="1" lang="en"></date-picker>
<date-picker v-model="time2" range :shortcuts="shortcuts" lang="en"></date-picker>
</div>
</div>언급URL : https://stackoverflow.com/questions/50052853/using-components-without-npm-inside-existing-web-page
반응형
'programing' 카테고리의 다른 글
| 자바 메모리 풀은 어떻게 분할됩니까? (0) | 2022.08.09 |
|---|---|
| "BEGIN_OBJECT가 필요하지만 1행 1열에 STRING이었습니다." (0) | 2022.08.09 |
| argc가 넘칠 수 있나요? (0) | 2022.08.09 |
| Vue-router를 사용한 Firebase 인증 확인 (0) | 2022.08.09 |
| unshift를 사용하여 어레이를 올바르게 업데이트하지 않음 (0) | 2022.08.09 |