vessels
@vessels
Ни черта не понял, но очень интересно!

Компоненты VueJS CDN, как организовать имея роутеры?

Добрый день, изучаю я 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?
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы