webpack, browerify 와 vue-cli 구조와 같은 프로젝트 구성이 아닌, 어떠한 이유로 .vue 파일을 build 과정
(npm run build 와 같은 명령어의 사용) 없이 사용해야 할 경우에, http-vue-loader를 활용할 수 있다.
Load .vue files directly from your html/js. No node.js environment, no build step.
.vue 파일을 node 환경 없이, build 과정 없이 당신의 html/js에 로드하세요!(?)
라는 광고 문구도 있더라.
기능
<template>,<script>,<style>가 지원됨.<style scoped>가 지원됨.module.export- 전통적 CSS / HTML / Sciprting language 사용가능!
index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<img src="https://vuejs.org/images/logo.png" alt="Vue logo">
<my-component :text="greeting"></my-component>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
greeting: 'Welcome to your Vue.js app!',
},
components : {
'my-component': httpVueLoader('./single.vue'),
},
})
</script>
</body>
</html>
single.vue
<template>
<div>
<h1>
외부 vue component를 불러오자
</h1>
<h1>
{{text}}
</h1>
</div>
</template>
<script>
module.exports = {
name: 'Page1',
props: ['text'],
data: () => ({
})
}
</script>
코드펜 참고 : https://codepen.io/mikechen2017/pen/wEdbBN/
출처 : https://www.javaer101.com/article/2183892.html
https://snyk.io/advisor/npm-package/http-vue-loader#readme
Curious for Everything