- Crea la estructura de carpetas (scaffolding) utilizando el CLI de Vue (@vue/cli).
Para empezar debemos realizar una instalación global mediante el comando npm install -g @vue/cli , una vez se halla instalado ejecutamos vue create vue-sample para crear el proyecto de la práctica:
Observas la estructura de carpetas generada automaticamente:
- El componente principal contendrá el fondo de pantalla 2 ventanas y un icono.
Vemamos la estructura del componente principal App.vue:
- Se han definido dos componentes Win311Window: cpanel y games.
- Un componente icono con el icono del ejemplo.
- Para los estilos se ha definido el color de fondo y algunos estilos adicionales no muy significativos.
- El componente Win311Window debe contener toda la estructura de la ventana y tendrá una zona donde aparecerán los iconos, que son nuestro otro componente: Win311Icon, que muestra el icono y el nombre.
Dentro del componenete Win311Window se ha definido la siguiente estructura. Para empezar dentro de template tenemos:
-
Se ha añadido una directiva style que hace referencia a un método definido como una propiedad computada cssVars() que se encarga de definir parametros de estilos diferentes para cada uno de los componentes ventana en función de los props recibidos. En este caso se está utilizando para que una ventana se sobreponga ligeramente a la otra.
-
Se añade el título de la ventana a la barra del menú a través de la variable definida en data; title.
-
Se añade el menú y las etiquetas correspondientes que lo conforman.
-
Para generar los componentes de icono que conformarán la ventana se utiliza la siguiente etiqueta
; se aplica un bucle sobre la variable icons del componente Win311Window que contiene un array con el nombre de los iconos que se han importado previamente del fichero windows.json. -
Por último en
se utiliza una condición extraida de una prop que recibe el componente, esta define si se debe o no mostrar dicho componente (La utilizamos para que no se vea en la ventana que se encuentra debajo).Select a game to open...
Dentro de script se ha trabajo de la siguiente forma:
-
Se importa el fichero json y el componente Win311Icon.
-
Definición de todos los props y de las variables del componente.
-
Se crea un método getVariables() que lee los datos del fichero json, y en función del valor de la propiedad theme se definen las variables.
-
Para cargar el método anterior se hace uso del método de "livecycle" beforeMount() que definirá el valor de las variables justo después de inicializar la instancia del componente.
Por último se han definido los estilos, en el caso del elemento window se aplican las variables definidas anteriormente:
- En el archivo icons.zip tienes una colección de iconos de Windows 3.11 que puedes utilizar para colocar en tu práctica. Recuerda meterlos en la carpeta assets.
Se han añadido los iconos:
- Las ventanas tendrán una prop type que dará a conocer en el interior del componente, de que ventana se trata (Control Panel, Apps, Games...) y que iconos tiene asociados. La ventana deben mostrar obligatoriamente, al menos, un título y una colección de iconos.
Como se puede observar, se cumple lo establecido en el enunciado. Se ha definido la prop como theme en vez de type puesto que se emplea el formato largo a la hora de definirlas y se evita confusiones con el elemento type.
- Los iconos por su parte, recibirán una prop name que indicará el icono del que se trata.
Veamos el contenido del componente Win311Icon:
- En esta ocasión pasamos a utilizar el cli de Vue, el cuál no utiliza Parcel por debajo, sino Webpack, por lo que algunas cosas cambiarán. Investiga como hacer el despliegue a GitHub Pages, de forma similar a como lo hacíamos con Parcel. Recuerda que debes cambiar la URL al desplegar en GitHub Pages, similar a como lo hacíamos con el parámetro --public-url y la carpeta build. Documéntalo en el README.
En primer lugar se define un fichero vue.config.js con el siguiente contenido:
A continuación se ejcuta el comando npm run build:
Nos creará la carpeta dist, tendremos que entrar a ella, crear una nueva rama gh-pages y volcar el contenido en el repositorio desde la nueva rama.
- Al hacer doble click sobre un icono, debe mostrar un alert() indicando el nombre icono que se ha seleccionado.
Para ello se hace uso de la directiva v-on con el evento dblclick que llamaría al método mensaje. Veamos la implemenatción:
- Interesaria que cada vez que el usuario pulse en el icono de una ventana, se resalte el fondo del texto para indicar que ese icono está seleccionado.
La implementación realizada ha sido similar al anterior reto; una directiva v_on con el evento click que llama a un método que añade o elimina el color de fondo del texto:
