skrd/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Siguiendo un tuto de vue <3

Browse Source
This commit is contained in:
Daniel Cortés
2019-06-16 17:37:08 -04:00
parent d5ff988b08
commit 2f09a63357
9 changed files with 70 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/Http/Controllers/SpaController.php Normal file
View File

@@ -0,0 +1,13 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SpaController extends Controller
{
public function index()
{
return view('spa');
}
}

5
package-lock.json generated
View File

@@ -8891,6 +8891,11 @@
"vue-style-loader": "^4.1.0"
}
},
"vue-router": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.6.tgz",
"integrity": "sha512-Ox0ciFLswtSGRTHYhGvx2L44sVbTPNS+uD2kRISuo8B39Y79rOo0Kw0hzupTmiVtftQYCZl87mwldhh2L9Aquw=="
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

3
package.json
View File

@@ -22,5 +22,8 @@
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-router": "^3.0.6"
}
}

48
resources/js/app.js vendored
View File

@@ -1,32 +1,30 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
require('./bootstrap');
Vue.Use(VueRouter)
window.Vue = require('vue');
import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const router = VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});

15
resources/js/views/App.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div>
<h1>Vue Router Demo App</h1>
</div>
<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>
</template>
<script>
export default {}
</script>

3
resources/js/views/Hello.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<p>Hello!</p>
</template>

3
resources/js/views/Home.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<p>This is the homepage</p>
</template>

6
resources/views/welcome.blade.php → resources/views/spa.blade.php
View File

@@ -3,12 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Spa!</title>
</head>
<body>
<div id="app">
<example-component></example-component>
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

15
routes/web.php
View File

@@ -1,16 +1,3 @@
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/{any}', 'SpaController@index')->where('any', '.*');