컴파일 없이 vu 컴포넌트를 외부 파일화

6277 단어 Vue.js자바스크립트vue-router템플릿 리터럴
webpack 등의 컴파일 툴을 이용하지 않고 vue를 이용해,
컴포넌트를 외부 파일화해 보았다.

단일 파일 컴포넌트(.vue)라면,
태그를 이용하는 곳을 .js로 템플릿 리터럴을 이용합니다.

home_component.js
const template = `
<div>
    {{ message }}
</div>
`;

export default {
    template,
    data() {
        return {
            message : "home page"
        }
    }
}

child_component.js
const template = `
<div>
    {{ message }}
</div>
`;

export default {
    template,
    data() {
        return {
            message : "child page"
        }
    }
}

임포트하는 쪽에서는 보통으로 import해, 이용합니다.

import.js
import HomeComponent from './home_component.js';
import ChildComponent from './child_component.js';


const router = new VueRouter({
    mode: "history",
    routes:[
        { name:'home',path: '/', component: HomeComponent },
        { name:'child',path: '/child', component: ChildComponent },
    ]
});

const app = new Vue({
    router
}).$mount('#app');

html에서는 cdn에서 vue, vue-router를 읽습니다.

index.html
<html>
<head>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<div id="app" v-cloak>
    <router-link to="/">home</router-link>
    <router-link to="/child">child</router-link>
    <router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="import.js" type="module"></script>
</html>


Excel Grep tool
Vue.js 구성 요소 설계 참조

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage