VueJS CDN components, how to organize having routers?

S

Spoon in the brain2019-08-25 09:05:57

Vue.js

Spoon in the brain, 2019-08-25 09:05:57

Good afternoon, I'm studying VueJS CDN, and immediately knowing how the CLI works, namely the component approach, I wanted to do it in the CDN as well.
Let's say I have index.html , it contains routers, and let's say that I have a home.vue file to change .
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>

How to correctly organize the connection of .vue elements in index ? As I understand it, Babel is needed for this ?