Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/Ejemplo vue»
De WikiEducator
(Página creada con « ==Introducción== *Usamos vue para programar el front dentro de nuestra app con laravel *Pendiente hacer una introducción a vue {{Actividad_MRM|Title=Instalación del e...») |
|||
| (6 revisiones intermedias por el mismo usuario no mostrado) | |||
| Línea 1: | Línea 1: | ||
| − | + | ==Introducción== | |
*Usamos vue para programar el front dentro de nuestra app con laravel | *Usamos vue para programar el front dentro de nuestra app con laravel | ||
*Pendiente hacer una introducción a vue | *Pendiente hacer una introducción a vue | ||
| − | {{ | + | {{MRM_Actividad|Title=Instalación del ecosistema| |
<br /> | <br /> | ||
1.- Instalar un proyecto con laravel | 1.- Instalar un proyecto con laravel | ||
| Línea 34: | Línea 34: | ||
</source> | </source> | ||
*Añadimos en '''''webpack''''' el nombre del framework o plugin que voy a utilizar | *Añadimos en '''''webpack''''' el nombre del framework o plugin que voy a utilizar | ||
| − | <source | + | <source lang=bash> |
mix.js('resources/js/app.js', 'public/js') | mix.js('resources/js/app.js', 'public/js') | ||
.postCss('resources/css/app.css', 'public/css',['tailwincss'] // | .postCss('resources/css/app.css', 'public/css',['tailwincss'] // | ||
| Línea 56: | Línea 56: | ||
<source lang=html5> | <source lang=html5> | ||
<!-- .....--> | <!-- .....--> | ||
| − | + | <body> | |
<div id="app"> | <div id="app"> | ||
<!-- ..Contenido html donde puedo utilizar vue...--> | <!-- ..Contenido html donde puedo utilizar vue...--> | ||
| Línea 65: | Línea 65: | ||
*Añadimos en '''''webpack''''' el nombre del framework o biblioteca '''''vue''''' | *Añadimos en '''''webpack''''' el nombre del framework o biblioteca '''''vue''''' | ||
| − | <source | + | <source lang=bash> |
mix.js('resources/js/app.js', 'public/js') | mix.js('resources/js/app.js', 'public/js') | ||
.vue() | .vue() | ||
| Línea 71: | Línea 71: | ||
); | ); | ||
</source> | </source> | ||
| + | }} | ||
| + | Generemos los ficheros en la carpeta publid (transpilar) | ||
| + | npm run dev ( o si modificamos pakage.json e insertamos el watch) | ||
| + | <source lang=bash> | ||
| + | "dev": "npm run development -- --watch", | ||
| + | </source> | ||
| + | npm run watch & | ||
Última revisión de 03:40 2 mar 2022
Introducción
- Usamos vue para programar el front dentro de nuestra app con laravel
- Pendiente hacer una introducción a vue
|
laravel new cronometro
laravel cd cronometro npm install npm install vue@next npm install tailwindcss@latest postCss@latest autoprefix@latest </ssource> *Creamos el fichero '''''tailwindcss.config.js''''' <source lang=bash> npx tailwindcss init
@tailwind base; @tailwind utilities; @tailwind components;
mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css',['tailwincss'] // ); 3.2 Para vue
import {createApp} from "vue"; createApp({ }).mount("#app");
<!-- .....--> <body> <div id="app"> <!-- ..Contenido html donde puedo utilizar vue...--> </div> <script src ="js/app.js"></script> <!--Cargamos el js con vue--> </body>
mix.js('resources/js/app.js', 'public/js') .vue() .postCss('resources/css/app.css', 'public/css',['tailwincss'] // );
|
Generemos los ficheros en la carpeta publid (transpilar) npm run dev ( o si modificamos pakage.json e insertamos el watch)
"dev": "npm run development -- --watch",
npm run watch &
