Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/vue»
De WikiEducator
(Página creada con «{{:Usuario:ManuelRomero/micursos/Laravel/vue/nav}}») |
|||
| (Una revisión intermedia por el mismo usuario no mostrado) | |||
| Línea 1: | Línea 1: | ||
{{:Usuario:ManuelRomero/micursos/Laravel/vue/nav}} | {{:Usuario:ManuelRomero/micursos/Laravel/vue/nav}} | ||
| + | |||
| + | {{MRM_Actividad|Title=Instalación| | ||
| + | ;Instalamos el paquete '''''laravel/ui''''' o lo incluimos en nuestro compoer.json y actualizamos con composer | ||
| + | <source lang=bash> | ||
| + | composer require laravel/ui | ||
| + | </source> | ||
| + | ;Con artisan, instalamos vue en nuestro poryecto | ||
| + | <source lang=bash> | ||
| + | php artisan ui vue | ||
| + | npm install | ||
| + | npm run dev | ||
| + | </source> | ||
| + | *Tras la instalación nos debe de enseñar que ha creado los ficheros correspondientes | ||
| + | [[Archivo:instalacion_vue_laravel1.png]] | ||
| + | *Y verificamos el contendio del fichero '''''resources/js/app.js''''' | ||
| + | <source lang=php> | ||
| + | /** | ||
| + | * 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. | ||
| + | */ | ||
| + | |||
| + | require('./bootstrap'); | ||
| + | |||
| + | window.Vue = require('vue'); | ||
| + | |||
| + | /** | ||
| + | * 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 app = new Vue({ | ||
| + | el: '#app', | ||
| + | }); | ||
| + | </source> | ||
| + | *Importante añadir el fichero '''''app.css''''' | ||
| + | {{MRM_Pregunta|Title=Duda mrm| | ||
| + | |||
| + | ¿El fichero app.css vacío ?????? | ||
| + | }} | ||
| + | |||
| + | }} | ||
Última revisión de 20:55 1 nov 2020
LARAVEL Pontente y amigable framework de PHP
¡Programa tus programas no tus herramientas!
Vue framework front-end usado en laravel
composer require laravel/ui
php artisan ui vue
npm install
npm run dev
Archivo:Instalacion vue laravel1.png
/** * 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. */ require('./bootstrap'); window.Vue = require('vue'); /** * 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 app = new Vue({ el: '#app', });
|
