composer create-project --prefer-dist laravel/laravel {name}
npm install
npm run dev
npm install vue
npm install vue-router
/route/web.php
Route::get('/{any}', 'ViewsController@index')->where('any', '.*');
/app/http/controllers/ViewsController.php
public function index() {
return view('index');
}
/resource/views/index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue SPA Demo</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
/resource/js/app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/app'
import Welcome from './views/welcome'
import Hello from './views/home'
import Logic from './views/logic'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Welcome
},
{
path: '/hello',
name: 'hello',
component: Hello
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
/resource/js/views/app.vue
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'hello' }">Hello World</router-link>
</p>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>
/resource/js/views/home.vue
<template>
<p>This is the home</p>
</template>
/resource/js/views/welcome.vue
<template>
<p>This is the welcome</p>
</template>
'개발 > HTML, CSS, Script' 카테고리의 다른 글
| [최종] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, 순서변경, POST업로드 (6) | 2020.09.26 |
|---|---|
| jquery ajax (0) | 2020.09.21 |
| FACEBOOK SDK - 로그인, 정보 가져오기 SCRIPT (0) | 2017.10.23 |
| 드랍다운 메뉴 (0) | 2017.09.30 |
| 슬라이드 메뉴, 슬라이딩 메뉴 (0) | 2017.09.30 |
