Introducción al desarrollo de Vue (2) | Hable sobre el grupo de la familia Vue ~

Family bucket, como su nombre indica, es una serie que se puede combinar y desarrollar en un proyecto Vue completo y poderoso.

Prefacio:

*Dos ideas centrales de Vue: componentización y basada en datos.

• Componentización: dividir el conjunto en individuos individuales reutilizables
• Basado en datos: afecta directamente la pantalla bom a través de cambios de datos y evita las operaciones dom.

Introducción a Vue Family Bucket

Grupo de la familia Vue: incluye vue (marco js progresivo), vuex (gestión de estado), vue-router (enrutamiento), vue-resource, axios, marcos de interfaz de usuario (iview, vant, elementUI, etc.), etc.

Vue tiene una famosa serie de cubos familiares, que incluye vue-router, vuex, vue-resource. Junto con la herramienta de construcción vue-cli, sass style, es el componente central de un proyecto vue completo.

En resumen: 1. Herramienta de construcción de proyectos, 2. Enrutamiento, 3. Gestión de estados, 4. Herramienta de solicitud HTTP.

Vue

Documento oficial de Vue.js: https://cn.vuejs.org/

1. Marco progresivo

Vue.js es un marco progresivo para crear interfaces de usuario. Vue adopta un diseño de desarrollo incremental de abajo hacia arriba. La biblioteca central de Vue solo se enfoca en la capa de vista, que no solo es fácil de usar, sino que también es fácil de integrar con bibliotecas de terceros o proyectos existentes. Por otro lado, cuando se combina con cadenas de herramientas modernas y varias bibliotecas de soporte, Vue también puede proporcionar controladores para aplicaciones complejas de una sola página.
Rendimiento progresivo: representación declarativa, sistema de componentes, enrutamiento del cliente, gestión del estado de big data, herramienta de compilación

2. Dos puntos centrales

• Enlace de datos receptivo
  Cuando los datos cambian, la vista se actualiza automáticamente, es decir, sincronización de datos bidireccional. El principio utiliza los datos del proxy setter / getter en Object.definedProperty en ES6 para monitorear el funcionamiento de los datos.
• El componente de vista combinado
  , es decir, la página finalmente se asigna a un árbol de componentes, que está diseñado con una estructura de datos de árbol, que es conveniente para el mantenimiento y la reutilización.

3. El DOM virtual
utiliza la estructura de datos correspondiente al DOM real para ser generado en la memoria, y esta estructura generada en la memoria se llama DOM virtual. Cuando los datos cambian, puede calcular inteligentemente el costo mínimo de volver a renderizar el componente y aplicarlo a la operación DOM.

4 、 MVVM

MVVM es la abreviatura de Model-View-ViewModel. Es un modelo de arquitectura basado en el desarrollo de front-end. Su núcleo es proporcionar enlace de datos bidireccional a View y ViewModel, lo que permite que el cambio de estado de ViewModel se transmita automáticamente a View, el llamado Enlace de datos bidireccional.

M: Modelo (capa de datos, que significa datos (el front-end es js))
V: Vista (es decir, capa DOM o interfaz de usuario)
VM: ViewModel (procesamiento de datos y capa intermedia de interfaz, que significa Vue)

5. Declaración Representación

El núcleo de Vue.js es un sistema que permite el uso de una sintaxis de plantilla concisa para representar datos de forma declarativa en el DOM.

vuex

Documento oficial: http://vuex.vuejs.org

Vuex es un modo de gestión de estado desarrollado específicamente para aplicaciones Vue.js. Utiliza almacenamiento centralizado para gestionar el estado de todos los componentes de la aplicación y utiliza las reglas correspondientes para garantizar que el estado cambie de forma predecible. Vuex se compone principalmente de cinco partes: estado, acción, mutación, getters, mudle.
El proceso de uso es: además de la confusión, los componentes pueden llamar directamente a cuatro partes: tate, action, mutation y getters

1 、 estado

Los datos similares al objeto vue se utilizan para almacenar datos y estado. Los datos almacenados responden. Si los datos cambian, los componentes dependientes de los datos también cambiarán en consecuencia. El estado global y los captadores se pueden asignar a las propiedades calculadas del componente actual a través de mapState.

Obtener estado:

// 方式一:
store.getters['getRateUserInfo']

//方式二:
...mapGetters({
    
    
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })

2 、 acciones

La acción se activa mediante el método store.dispatch: la acción admite llamadas asincrónicas (se puede llamar a api), la mutación solo admite la sincronización de operaciones y la acción envía la mutación en lugar de cambiar directamente el estado.

3 、 mutación

Cada mutación tiene un tipo de evento de cadena (tipo) y una función de devolución de llamada (controlador). Esta función de devolución de llamada es donde realmente hacemos cambios de estado, y aceptará el estado como el primer parámetro.

4 、 captadores

Vuex nos permite definir "getter" en la tienda (se puede considerar como un atributo calculado de la tienda). Al igual que una propiedad calculada, el valor de retorno de un captador se almacenará en caché de acuerdo con sus dependencias y solo se volverá a calcular si cambia su valor dependiente.
La función auxiliar mapGetters simplemente asigna los captadores en la tienda a las propiedades calculadas locales.

Proceso central de Vuex

Vue-cli

Documento oficial de Vue-cli: https://cli.vuejs.org/

Vue-cli es un andamio para construir rápidamente esta aplicación de una sola página. Proporciona el andamio @ vue / cli. Su rica colección de complementos oficiales integra las mejores herramientas en el ecosistema de front-end. Una interfaz gráfica de usuario completa para crear y administrar proyectos de Vue.js.

instalación:

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack yourproject

# 安装依赖
$ cd yourproject
$ npm install
$ npm run dev

1. Interfaz de línea de comandos

CLI (@ vue / cli) es un paquete npm instalado globalmente y vue proporciona comandos en su terminal. Proporciona la capacidad de construir rápidamente nuevos proyectos a través de vue create o vue serve para crear rápidamente prototipos de nuevas ideas. También puede administrar el proyecto vue ui mediante la interfaz gráfica de usuario. En las siguientes secciones de esta guía, presentaremos paso a paso lo que puede hacer.

2. Servicio CLI

El servicio CLI (@ vue / cli-service) es una dependencia de desarrollo. Este es un paquete npm que se instala localmente en cada proyecto creado @ vue / cli. El servicio CLI se basa en webpack y webpack-dev-server.

El servicio CLI incluye:

• Cargue los servicios principales de otros complementos de CLI;
• La configuración del paquete web interno se ha optimizado para la mayoría de las aplicaciones;
• El binario en el proyecto vue-cli-service viene con comandos básicos de servir, compilar e inspeccionar.

3. Complemento CLI

El complemento CLI es un paquete npm que proporciona funciones opcionales para proyectos Vue CLI, como conversión de Babel / TypeScript, integración de ESLint, pruebas unitarias y pruebas de un extremo a otro.

vue-resource

dirección de github: https://github.com/pagekit/vue-resource

vue-resource es un complemento de Vue que utiliza la tecnología XMLHttpRequrest o JSONP para cargar datos del lado del servidor de forma asíncrona. Proporciona una interfaz de solicitud HTTP general y una interfaz de solicitud de arquitectura RESTful, así como métodos globales y métodos de instancia de componentes de VUe.

El complemento vue-resource tiene las siguientes características:

1. Tamaño pequeño: vue-resource es muy pequeño, solo alrededor de 12KB después de la compresión, y solo 4.5KB después de que se habilita la compresión gzip en el servidor, que es mucho más pequeño que jQuery.
2. Admite navegadores convencionales
   Como Vue.js, vue-resource no admite navegadores inferiores a IE 9, sino otros navegadores convencionales.
3. Compatibilidad con la API de Promise y las plantillas de URI
   Promise es una característica de ES6. El significado chino de Promise es "profeta", y los objetos de Promise se utilizan para cálculos asincrónicos. Las plantillas de URI representan plantillas de URI, que son algo similares a las plantillas de enrutamiento de ASP.NET MVC.
4. Interceptor de soporte El
   interceptor es global y el interceptor puede realizar algún procesamiento antes y después de que se envíe la solicitud.
   Los interceptores pueden ser muy útiles en algunos escenarios, como configurar access_token en los encabezados antes de que se envíe la solicitud, o proporcionar un método de procesamiento común cuando la solicitud falla.

vue-router

Documento oficial de vue-router: http://router.vuejs.org

Vue Router es el administrador de rutas oficial de Vue.js. Está profundamente integrado con el núcleo de Vue.js, lo que facilita la creación de aplicaciones de una sola página.

instalación:

npm installvue-router

Las funciones incluidas en Vue Router son:

• Tabla de enrutamiento / vista anidada
• Configuración de enrutamiento modular basada en componentes
• Parámetros de enrutamiento, consultas, comodines
• Ver efecto de transición basado en el sistema de transición Vue.js
• Control de navegación detallado
• Enlace con clase CSS activada automáticamente
• Modo de historial HTML5 o modo hash, degradado automáticamente en IE9
• Comportamiento personalizado de la barra de desplazamiento

Puede utilizar las propiedades de transición de vue para representar el efecto de cambiar de página.
Para usarlo en un proyecto modular, debe instalar explícitamente la función de enrutamiento a través de Vue.use ():

import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)

axios

Documento oficial de axios: http://www.axios-js.com/

Axios es una biblioteca HTTP basada en promesas, que es simplemente un paquete de solicitud http que se puede usar en navegadores y node.js. El sitio web oficial de Vue recomienda usar axios para llamadas http.

instalación:

npm install axios --save

características axios

• Cree XMLHttpRequests desde el navegador
• Crea una solicitud http desde node.js
• API de promesa de soporte
• Interceptar solicitud y respuesta
• Convertir datos de solicitud y datos de respuesta
• Cancelar petición
• Convierta automáticamente datos JSON
• El cliente admite defensa XSRF> axios

UI框架(iview、vant、elementUI)

1. View UI, el iView original, es un conjunto de bibliotecas de componentes de interfaz de usuario de código abierto y de alta calidad basadas en Vue.js (divididas en diferentes versiones, como applets y terminales de PC), que sirven principalmente a los productos intermedios y back-end de la interfaz de PC.

característica:

• Componentes y funciones enriquecidos para satisfacer la mayoría de los escenarios de sitios web
• Proporcione un sistema de administrador listo para usar y una biblioteca de componentes de alta gama, lo que ahorra en gran medida los costos de desarrollo
• Brindar soporte técnico personalizado profesional y de alta calidad
• API amigable, uso libre y flexible del espacio
• UI detallada y hermosa
• Documentación mejorada
• Temas personalizables

Quién usa:
Alibaba, Baidu, Tencent
, Toutiao, JD, Didi Chuxing, Meituan , Sina, Lenovo , iFlytek, Tongcheng Yilong ... 2. elementUI se basa en la biblioteca de componentes de back-end y media de escritorio Vue 2.0.

3. La biblioteca de componentes Vue móvil liviana y confiable de Vant es una biblioteca de componentes móviles basada en Vue 2.0 de código abierto, que tiene como objetivo desarrollar sitios móviles hermosos y fáciles de usar basados ​​en Vue de forma más rápida y sencilla.

Hay otros marcos de interfaz de usuario ...

Anterior: Introducción al desarrollo de Vue (1) | Instrucciones y casos básicos de Vue