anxolin/index.html

## index.html
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>VUE example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      color: rgb(0, 124, 62);
      background-color: rgb(204, 255, 238);
      font-size: 1.5em;
    }

    h1 {
      font-size: 2em;
    }

    main {
      background-color: rgb(0, 124, 62);
      border-radius: 10%;
      color: white;
      width: 80%;
      min-height: 8em;
      padding: 1.5em;
    }

    ul {
      list-style: none;
    }

    ul li {
      background-color: rgb(0, 124, 62);
      padding: 0.4em;
      border-radius: 30%;
      color: white;
      display: inline-block;
    }

    ul a {
      text-decoration: none;
      color: white;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>Hello Vue!</h1>
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <router-link to="/foo">Go to Foo</router-link>
      </li>
      <li>
        <router-link to="/bar">Go to Bar</router-link>
      </li>
    </ul>
    <main>
      <router-view></router-view>
    </main>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  <script>
    console.log('Vue example')

    const Home = { template: '<div>Welcome to vue basic example</div>' }
    const Foo = { template: '<div>This is Foo!</div>' }
    const Bar = { template: '<div>This is Bar!</div>' }
    const NotFound = { template: '<div>Upps! The page you are looking, doesn\'t exist</div>' }
    const routes = [
      { path: '/', component: Home },
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar },
      { path: '*', component: NotFound }
    ]
    const router = new VueRouter({
      routes,
      mode: 'history'
    })

    const app = new Vue({
      router,
      data: {
        message: 'Hello Vue!'
      }
    }).$mount('#app')

  </script>
</body>

</html>
	<!doctype html>

	<html lang="en">

	<head>
	<meta charset="utf-8">

	<title>VUE example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style>
	body {
	color: rgb(0, 124, 62);
	background-color: rgb(204, 255, 238);
	font-size: 1.5em;
	}

	h1 {
	font-size: 2em;
	}

	main {
	background-color: rgb(0, 124, 62);
	border-radius: 10%;
	color: white;
	width: 80%;
	min-height: 8em;
	padding: 1.5em;
	}

	ul {
	list-style: none;
	}

	ul li {
	background-color: rgb(0, 124, 62);
	padding: 0.4em;
	border-radius: 30%;
	color: white;
	display: inline-block;
	}

	ul a {
	text-decoration: none;
	color: white;
	}
	</style>
	</head>

	<body>
	<div id="app">
	<h1>Hello Vue!</h1>
	<ul>
	<li>
	<router-link to="/">Home</router-link>
	</li>
	<li>
	<router-link to="/foo">Go to Foo</router-link>
	</li>
	<li>
	<router-link to="/bar">Go to Bar</router-link>
	</li>
	</ul>
	<main>
	<router-view></router-view>
	</main>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

	<script>
	console.log('Vue example')

	const Home = { template: '<div>Welcome to vue basic example</div>' }
	const Foo = { template: '<div>This is Foo!</div>' }
	const Bar = { template: '<div>This is Bar!</div>' }
	const NotFound = { template: '<div>Upps! The page you are looking, doesn\'t exist</div>' }
	const routes = [
	{ path: '/', component: Home },
	{ path: '/foo', component: Foo },
	{ path: '/bar', component: Bar },
	{ path: '*', component: NotFound }
	]
	const router = new VueRouter({
	routes,
	mode: 'history'
	})

	const app = new Vue({
	router,
	data: {
	message: 'Hello Vue!'
	}
	}).$mount('#app')

	</script>
	</body>

	</html>