Crea tu primera aplicación con Vue.js

Si nunca ha creado una aplicación Vue.js, lo guiaré en la tarea de crear una y comprender cómo funciona. La aplicación que vamos a crear ya está lista y es la aplicación predeterminada de Vue CLI.

Si nunca ha creado una aplicación Vue.js, lo guiaré en la tarea de crear una y comprender cómo funciona.

Primer ejemplo

Primero usaré el ejemplo más básico de usar Vue.

Creas un archivo HTML que contiene

<html>
  <body>
    <div id="example">
      <p>{{ hello }}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#example',
            data: { hello: 'Hello World!' }
        })
    </script>
  </body>
</html>

y lo abres en el navegador. ¡Esa es tu primera aplicación Vue! La página debe mostrar un "¡Hola mundo!" mensaje.

Pongo las etiquetas del script al final del cuerpo para que se ejecuten en orden después de que se cargue el DOM.

Lo que hace este código es instanciar una nueva aplicación Vue, vinculada a la#exampleelemento como su plantilla (se define usando un selector CSS generalmente, pero también puede pasar un HTMLElement).

Luego, asocia esa plantilla a ladataobjeto. Ese es un objeto especial que aloja los datos que queremos que Vue represente.

En la plantilla, el especial{{ }}La etiqueta indica que alguna parte de la plantilla es dinámica, y su contenido debe buscarse en los datos de la aplicación Vue.

Ver en Codepen

Puedes ver este ejemplo en Codepen:https://codepen.io/flaviocopes/pen/YLoLOp

Codepen

Codepen es un poco diferente de usar un archivo HTML simple, y debe configurarlo para que apunte a la ubicación de la biblioteca Vue en la configuración del Pen:

Pen settings

Segundo ejemplo: la aplicación predeterminada de Vue CLI

Subamos un poco el nivel del juego. La próxima aplicación que vamos a crear ya está lista y estála aplicación predeterminada de Vue CLI.

¿Qué es la CLI de Vue? Es una utilidad de línea de comandos que ayuda a acelerar el desarrollo al crear un esqueleto de aplicación para usted, con una aplicación de muestra en su lugar.

Hay dos formas de obtener esta aplicación.

Utilice la CLI de Vue localmente

El primero es instalar elVue CLIen su computadora y ejecute el comando

vue create <enter the app name>

Usar CodeSandbox

Una forma más sencilla, sin tener que instalar nada, es ir ahttps://codesandbox.io/s/vue.

CodeSandbox es un editor de código genial que le permite crear aplicaciones en la nube, lo que le permite usar cualquier paquete npm y también integrarse fácilmente con Zeit Now para una implementación fácil y GitHub para administrar el control de versiones.

Ese enlace que puse arriba abre la aplicación predeterminada de Vue CLI.

Ya sea que elija usar la CLI de Vue localmente o a través de CodeSandbox, inspeccionemos esa aplicación Vue en detalle.

La estructura de archivos

Junto apackage.json, que contiene la configuración, estos son los archivos contenidos en la estructura inicial del proyecto:

index.html
src/App.vue
src/main.js
src/assets/logo.png
src/components/HelloWorld.vue

`index.html`

losindex.htmlarchivo es el archivo principal de la aplicación.

En el cuerpo incluye solo un elemento simple:<div id="app"></div>. Este es el elemento que utilizará la aplicación Vue para adjuntar al DOM.

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>
<title>CodeSandbox Vue</title>
</head>
<body>
<div id=“app”></div>
<!-- built files will be auto injected -->
</body>
</html>

`src/main.js`

Estos son los principales archivos JavaScript que impulsan nuestra aplicación.

Primero importamos la biblioteca Vue y el componente de la aplicación desdeApp.vue.

Establecemos productionTip en false, solo para evitar que Vue genere un "estás en modo de desarrollo”Punta en la consola.

A continuación, creamos la instancia de Vue, asignándola al elemento DOM identificado por#app, que definimos enindex.htmly le decimos que utilice el componente Aplicación.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
components: { App },
template: ‘<App/>’
})

`src/App.vue`

App.vuees un componente de archivo único. Contiene 3 fragmentos de código: HTML, CSS y JavaScript.

Esto puede parecer extraño al principio, pero los componentes de un solo archivo son una excelente manera de crear componentes autónomos que tienen todo lo que necesitan en un solo archivo.

Tenemos el marcado, el JavaScript que va a interactuar con él y el estilo que se le aplica, que puede tener un alcance o no. En este caso, no tiene alcance, y solo genera ese CSS que se aplica como CSS normal a la página.

La parte interesante radica en elscriptetiqueta.

Importamos uncomponentedesde elcomponents/HelloWorld.vuearchivo, que describiremos más adelante.

Este componente será referenciado en nuestro componente. Es una dependencia. Vamos a generar este código:

<div id="app">
  <img width="25%" src="./assets/logo.png">
  <HelloWorld/>
</div>

de este componente, que ve hace referencia al componente HelloWorld. Vue insertará automáticamente ese componente dentro de este marcador de posición.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>
<script>
import HelloWorld from ‘./components/HelloWorld’
export default {
name: ‘App’,
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

`src/components/HelloWorld.vue`

Aquí está el componente HelloWorld, que está incluido en el componente App.

Este componente genera un conjunto de enlaces, junto con un mensaje.

¿Recuerda que antes hablamos de CSS en App.vue, que no tenía alcance? El componente HelloWorld tiene CSS de ámbito.

Puede determinarlo fácilmente mirando elstyleetiqueta. Si tiene elscopedatributo, entonces tiene el alcance:<style scoped>

Esto significa que el CSS generado se dirigirá al componente de forma única, a través de una clase que Vue aplica de forma transparente. No necesita preocuparse por esto, y sabe que el CSS nofugaa otras partes de la página.

El mensaje de salida del componente se almacena en eldatapropiedad de la instancia de Vue, y se muestra en la plantilla como{{ msg }}.

Todo lo que esté almacenado endataes accesible directamente en la plantilla a través de su propio nombre. No necesitamos decirdata.msg, solomsg.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
name: ‘HelloWorld’,
data() {
return {
msg: ‘Welcome to Your Vue.js App’
}
}
}
</script>
<!-- Add “scoped” attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

Ejecutar la aplicación

CodeSandbox tiene una función de vista previa genial. Puede ejecutar la aplicación y editar cualquier cosa en la fuente para que se refleje inmediatamente en la vista previa.

The Vue App

Descarga mi gratisManual de Vue