Vue es un framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde el inicio para ser adoptado incrementalmente. La biblioteca principal se enfoca solo en la capa de la vista, y es muy simple de utilizar e integrar con otros proyectos o bibliotecas existentes. Por otro lado, Vue también es perfectamente capaz de soportar aplicaciones sofisticadas de una sola página (en inglés single-page-application o SPA) cuando se utiliza en combinación con herramientas modernas y librerías compatibles. Instalación Para la instalación de Vue utilizar NPM (gestor de paquetes de Node) es el método de instalación recomendado cuando se construyen aplicaciones de gran escala con Vue. Se integra bien con empaquetadores de módulos como Webpack o Browserify. $mkdir example-vue $cd example-vue $npm init $npm install vue --save Vue permite el desarrollo de componentes de Interfaz de Usuario (UI) por medio de JavaScript, e...
Vue es un framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde el inicio para ser adoptado incrementalmente. La biblioteca principal se enfoca solo en la capa de la vista, y es muy simple de utilizar e integrar con otros proyectos o bibliotecas existentes. Por otro lado, Vue también es perfectamente capaz de soportar aplicaciones sofisticadas de una sola página (en inglés single-page-application o SPA) cuando se utiliza en combinación con herramientas modernas y librerías compatibles.
Instalación
Para la instalación de Vue utilizar NPM (gestor de paquetes de Node) es el método de instalación recomendado cuando se construyen aplicaciones de gran escala con Vue. Se integra bien con empaquetadores de módulos como Webpack o Browserify.
$mkdir example-vue$cd example-vue$npm init$npm install vue --saveVue permite el desarrollo de componentes de Interfaz de Usuario (UI) por medio de JavaScript, estos componentes reaccionan ante eventos masivos sin que el rendimiento se vea perjudicado. La librería se enmarca dentro las arquitecturas de componentes con una gestión interna de modelos basada en el patrón MVVM. Esto quiere decir que los componentes, internamente, tienen mecanismos de doble 'data-binding' para manipular el estado de la aplicación.
Server
Instalamos un servidor de desarrollo sencillo
$npm install --save-dev live-server
y los asociamos un script de NPM en el fichero package.json
"scripts": {
"server": "live-server ."
}
ahora ejecutando npm run server tenemos un servidor web con live-reload en localhost:8080.
View
Creamos el index de entrada a la aplicación e incluimos la biblioteca de Vue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueJS Example</title>
</head>
<body>
<div id="app">
<h1>{{ propiedad }}</h1>
<input type="text" v-model="propiedad">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
View Model
app.js contiene el modelo de la vista index.html
const app = new Vue({
el: '#app',
data: {
propiedad: 'Valor de la propiedad'
}
});
Interfaz de Linea de Comandos (CLI)
Vue.js provee una CLI oficial para estructurar rápidamente Aplicaciones de una Sola Página (SPA por sus siglas en inglés). Provee configuraciones todo-en-uno (webpack, webpack-simple, browserify, browserify-simple, pwa, simple) para un flujo de trabajo frontend moderno.# Instala vue-cli $ sudo npm install --global vue-cli # Crea un nuevo proyecto usando la plantilla "webpack" $ vue init webpack my-project # Instala las dependencias y ¡listo! $ cd my-project $ npm install $ npm run dev
Comentarios
Publicar un comentario