introducción
breve introducción
VUE (pronunciación / VJU /, similar a la vista) es un cuadro progresivo para la construcción de interfaces de usuario. La otra diferencia marco es grande, Vue está diseñado para ser aplicado de la capa hasta la parte inferior por capa. Vue enfoque librería base sólo en la capa de vista, no sólo es fácil de usar, pero también fácil de integrar las bibliotecas de terceros o proyecto existente. Por otra parte, cuando se utiliza conjuntamente con una cadena de herramientas modernas y diversas bibliotecas de soporte, Vue también plenamente capaz de proporcionar la unidad para la aplicación de una página compleja.
Vue.js MVVM enlace de datos también proporciona un sistema y un componente puede ser combinado con un simple, API flexible, que es sensible a la diana de datos de unión se pueden combinar y aplicarse tanto como sea posible por un simple componente de vista API.
Las principales características de Vue.js
Vue.js es una biblioteca excelente front-end de desarrollo de interfaz de JavaScript esa misma razón el fuego, porque hay muchas características excepcionales, que tiene las siguientes características principales.
1) Marco ligera
Vue.js puede realizar un seguimiento automático y calcular una expresión atributos dependientes del molde, proporcionar el enlace de datos MVVM y una combinación de los componentes del sistema, tiene una API simple y flexible, de modo que los lectores más fácil de entender, ser capaz de empezar a trabajar más rápido.
2) el enlace de datos de dos vías
representación declarativa es vinculante principalmente de dos vías de datos, el núcleo es también Vue.js, que permite el uso de la sintaxis simple plantilla declarará representación de datos integrados en el DOM.
3) la instrucción
Vue.js interactuar con la página, se realiza principalmente a través de la incorporada en las instrucciones, las instrucciones de ese efecto cuando el valor de su expresión en consecuencia ciertos comportamientos al DOM.
4) del componente
Componente (componente) Vue.js es una de las características más potentes. elementos HTML que podría ser largo, el código reutilizable paquete.
En Vue, el componente de comunicación se pasa a través Sons los apoyos, transmisión unidireccional de padre a hijo. Subconjuntos y componentes de comunicación de los padres, notifican al componente padre cambiando los datos del evento de disparo. Esto forma un modo de comunicación básico Sons.
En el desarrollo de componentes y HTML, JavaScript, etc., tienen una relación muy estrecha, de acuerdo con las necesidades reales de los componentes personalizados, permitiendo a los desarrolladores a ser más conveniente, puede reducir enormemente la cantidad de código escrito.
Componente también soporta sobrecargas térmicas (hotreload). Cuando hicimos cambios no se actualiza la página, pero el componente en sí sobrecargada de inmediato y no afectarán el estado actual de toda la aplicación. CSS también soporta caliente sobrecargado.
5) El encaminamiento cliente
Vue-router es Vue.js ruta oficial plug-ins, la integración con la profundidad Vue.js, utilizados para construir la aplicación de una sola página. aplicaciones de una sola página Vue y componentes basados en el enrutamiento, la ruta para definir la ruta de acceso y la ruta y el mapeo congregación, alcanzar las páginas tradicionales de transferencia y el salto de la página de enlaces.
6) Gestión del Estado
administración de estado es en realidad una sola vía de flujo de datos, lo que hace la unidad de estado de vista, el usuario utiliza para generar la acción de visualización, Estado hacer la diferencia, por lo que re-renderizado Ver, forman un componente separado.
SPA y MPA contraste
MPA
La mayor parte de la estructura del proyecto tradicional que utiliza una aplicación de varias páginas (MultiPage aplicación, MPA), el tiempo necesario para cambiar el contenido que tienden a saltar un único archivo html, por este tiempo, el impacto del rendimiento de la red, no será un blanco del navegador interfaz de tiempo incierto, la experiencia del usuario no es bueno.
SPA
Sin actualización después de cambiar una sola página de la aplicación aplicación SPA (aplicación de una sola página) es un usuario cambia la dirección de la barra de direcciones a ciertos ajustes y el contenido dinámico de diferentes plantillas, la experiencia del usuario es buena.
Vue utilizará plug-vue-enrutador oficial utilizar una sola página, el principio es el de interruptor (instalado y desinstalado) detectada por el componente de enrutamiento correspondiente a la barra de dirección va a cambiar.
Comparación entre los dos
| SPA vs MPA | la aplicación de una sola página (aplicación de una sola página, SPA) | la aplicación de varias páginas (MultiPage aplicación, MPA) |
|---|---|---|
| composición | Alojar una pluralidad de páginas y fragmentos de página | Múltiples composición de página completa |
| El intercambio de recursos (CSS, JS) | Sólo tiene que cargar la parte común de vivienda | No comparta, es necesario cargar cada página |
| modo de actualización | actualización de la página parcial o cambio | actualización de la página completa |
| modo url | a.com/#/pagone a.com/#/pagtow |
a.com/#/pagone.html a.com/#/pagtwo.html |
| La experiencia de usuario | fragmentos de página cambian rápido, buena experiencia de usuario | Página conmutación de cargas lentamente, la fluidez no es una experiencia de usuario deficiente |
| animación de transición | Fácil de implementar | no puede ser alcanzado |
| transferencia de datos | fácil | Url paso de parámetros dependientes, o galleta, localStorage etc. |
| Search Engine Optimization (SEO) | Requiere un programa separado, más difícil de lograr, no es propicio para la recuperación de SEO puede tomar ventaja de la representación del lado del servidor de optimización (SSR) | Implementación fácil |
| alcance | Experiencia de alta demanda, la búsqueda de la interfaz de la aplicación lisa | Soporte para aplicaciones de búsqueda de un alto motor de búsqueda |
| Los costos de desarrollo | Alta, a menudo necesitan depender de marco profesional | Bajo, pero de varias páginas de código duplicado |
| Los costos de mantenimiento | relativamente fácil | relativamente compleja |
Herramientas de instalación
El primer paso:
Instalar Node.js, se refiere específicamente al blog Node.js pasos de instalación detallado tutorial (versión de Windows) .
Paso dos:
webpack instalación, con especial referencia blog de configuración de la instalación webpack y el proceso de embalaje en detalle .
El tercer paso:
Instalación vue-cli, introduzca un comando, la instalación mundial vue-cli, en el que el espejo CNPM Taobao, la velocidad de la instalación, que es la abreviatura de instalar, g es una abreviatura del mundial.
CNPM i vue-cli -g
proceso de creación de vue-cli
El primer paso:
Después de que la instalación se haya completado, ejecute CMD, y el interruptor a la necesidad de crear un proyecto Vue directorio, introduzca el siguiente comando para empezar a crear.
init webpack la VUE Test-VUE // Nota: El nombre Un proyecto debe estar en minúsculas, de lo contrario, el error
Paso dos:
Entonces comenzó la opción de proyecto se establece de la siguiente manera:
- Nombre del proyecto --- nombre del artículo, pulsa enter;
- La descripción del proyecto --- descripción del proyecto, introduzca "pruebas de proyecto Vue", pulse intro;
- Autor --- autor, introduzca "aizai846", pulse intro;
- Tiempo de ejecución + Compilador: recomendado para la mayoría de usuarios y tiempo de ejecución de sólo aproximadamente 6 KB: más ligero min + gzip, pero las plantillas (o cualquier Vue-specificHTML) sólo se permiten en archivos .vue - hacen que las funciones se requieren en otros lugares dos opciones --- primera uno está compilado para ejecutarse más recomendados, sólo el segundo tiempo de funcionamiento. Por el teclado y botones para seleccionar abajo, pulsa enter;
- ? La Instalar vue-Router <la Y- / el n-> --- se instalan ruta vue plug-ins, introduzca "Y", pulsa enter;
- ESLint la pelusa de su código al uso? <La Y- / la N-> --- si el código de gestión ESLint, ESLint es un código de estilo herramienta de gestión, el código se utiliza para estilo uniforme, se utilizará el proyecto general, sino como un principiante, no se recomienda la instalación, el tipo "n", pulse intro;
- Las pruebas de unidades del SET <Y / n-> --- unidad de prueba está instalado, la entrada donde "n", pulsa enter;
- E2E configuración de prueba con sombra de la noche? ? <La Y- / la N-> --- si desea instalar E2E prueba entra aquí "n", pulsa enter;
- Corremos debería "NPM instalar" para que en el proyecto ha sido la Después de la Creado? <Recomendado> <usar teclas de dirección> Sí, el uso NPM Sí, utilizar el hilo No, el que por el mango Voluntad que yo --- tres opciones, aquí elegimos la primera tres, ya que las dependencias del proyecto vue instalados por NPM instalar, muy lento, podemos crear el proyecto a sí mismos a través de "CNPM instalar" instalación.
Y que creamos lo largo del proyecto, como se muestra a continuación.
El tercer paso:
Desde el último elemento de un segundo paso, hemos optado por instalar su propio proyecto de instalación de dependencias de paquetes, por lo que aquí introduzca el comando siguiente para completar las dependencias del paquete de proyectos.
F. CD: \ JsCodeProject \ VUE-Test // interruptor en el directorio del proyecto CNPM I // en donde, espejo CNPM se instala a través de Taobao, la velocidad es muy rápido
Paso cuatro:
Introduzca el siguiente comando para comprobar si el proyecto puede funcionar normalmente.
NPM dev plazo
Después de una exitosa carrera en el cuadro de comandos shell, la salida de la siguiente información.
En este caso, en el navegador, introduzca la URL de la parte superior, se puede visitar nuestro proyecto vue de nueva creación, como se muestra a continuación
Contenido Introducción vue
Nuestro nuevo proyecto abierto a través VSCode, estructura de directorios específica que se muestra en la figura.
En el archivo package.json, podemos ir a la entrada del archivo de configuración de entorno de desarrollo y producción.
"guiones" : { "dev": "webpack-dev-servidor --inline --progress --config build / webpack.dev.conf.js" , "Inicio": "dev plazo NPM" , "acumulación": " nodo de acumulación / build.js" }
Donde la entrada al entorno de desarrollo "documento"; webpack.dev.conf.js entrada del archivo de "build.js" de producción, que se encuentran en el archivo de creación, como se muestra en la figura.
En el que parte del archivo de la siguiente manera:
- build.js --- entorno de producción de archivos de entrada, envasados para la construcción de un archivo, el código fuente para construir el paquete (compilado, compresión, etc.);
- utils.js --- es una frecuencia de uso de archivos, este documento contiene tres funciones de utilidad: recursos estáticos generación de trayectoria genera el cargador objeto ExtractTextPlugin o cadena, generando configuración estilo-loader;
- webpack.base.conf.js --- aparece en webpack.base.conf.js webpack.dev.conf.js, este documento es los entornos de desarrollo y producción, incluso entorno de prueba, configuración webpack pública de estos entornos;
- Configuración de entrada webpack.dev.conf.js --- entorno de desarrollo de webpack.
- webpack.prod.conf.js --- de entrada está dispuesto en una webpack entorno de producción. También se basa en los webpack.base.conf.js antes mencionados, utils.js y config / index.js;
implementación de paquetes
archivos de desarrollo de proyectos en el directorio src, después de la finalización del proyecto de desarrollo, use el siguiente comando para empaquetar el proyecto.
NPM acumulación de ejecución
Después de la terminación de los envases generará carpeta dist, como se muestra, cuando el elemento de línea, carpeta dist directamente en servidor.
resumen
Este artículo describe el proceso de creación del proyecto Vue y explicaciones estructura de directorios Vue nos permite una comprensión más clara del proyecto Vue proceso de desarrollo, los zapatos para niños para el principiante, pueden desempeñar un buen papel para liderar el camino, también hay una gran cantidad de proyectos no explicó lugar en el que los zapatos pueden agregar enfoque, vamos a explicar en detalle en un post posterior, si hay deficiencias en el texto, perdona, al mismo tiempo, se crea un problema, puede dejar un intercambio de mensajes!