Добрый день, изучаю я VueJS CDN, и сразу зная как устроен CLI, а именно компонентность, я захотел сделать также в CDN.
Допустим у меня есть
index.html, в нём лежат роутеры, и допустим что у менять есть файл
home.vue.
index.html<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
</head>
<body>
<div id="app" class="container" style="margin-top: 50px;">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li> <router-link class="nav-link" to="/"> Home </router-link> </li>
<li> <router-link class="nav-link" to="about"> About </router-link> </li>
<li> <router-link class="nav-link" to="contact"> Contact </router-link> </li>
</ul>
</div>
</nav>
<div class="text-center" style="margin-top: 20px;">
<router-view></router-view>
</div>
</div>
<script src=".../home.vue"></script>
<script>
var routes = [
{ path: '/', component: Home}
];
var router = new VueRouter({
routes: routes,
mode: 'history',
base: '/'
});
var app = new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>
home.vue<template>
<p>{{ greeting }} World!</p>
</template>
<script>
var Home = new Vue({
data: {
greeting: 'Hello'
}
})
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
Как правильно организовать подключение .vue элементов в
index? Я так понимаю для этого нужен
Babel?
Средний