Cómo diseñar una arquitectura de componentes front-end universal a través de Vue Webpack

Creo que la curva de aprendizaje de angularjs es relativamente larga, los problemas no se pueden resolver de inmediato y la calidad de la codificación es obviamente muy pobre. Para un equipo que elige angularjs, creo que los estándares de codificación son muy importantes; de lo contrario, no habrá ninguna mejora en la capacidad de codificación.

avalon:

La documentación de avalonjs no es lo suficientemente completa y creo que parte del soporte de código abierto no es lo suficientemente sólido. Sin embargo, si tiene necesidades de proyecto y necesita compatibilidad con el navegador IE, recomiendo avalonjs

vue:

vuejs tiene documentación relativamente completa. Vue absorbe algunas de las ventajas de angularjs, pero también tiene. Algunas desventajas, al menos los estándares de codificación han dado un salto cualitativo y el ciclo de aprendizaje es más corto. Vue era originalmente una biblioteca de clases liviana, utilizada para cosas como reaccionar.

Al mismo tiempo, vue también se puede usar para el diseño de arquitectura front-end, como: vueify vue-router (marco de spa).

Dirección de aprendizaje de Vue: .vuejs.org/

Hay tantas cosas inútiles mencionadas anteriormente, ¡hablemos de algunas útiles!

Mi diseño de arquitectura de componentes front-end, el directorio es el siguiente:

Se utiliza bastante conocimiento en la arquitectura del proyecto, la lista de conocimientos es la siguiente:

[ 1]: gulp webpack construye la herramienta de empaquetado, utilizando una serie de cargadores, como: vue-loader, sass-loader, babel-loader, postcss, postcss-custom-properties, etc.

[2]: postcss -custom-properties: se utiliza para hacer que el estilo sea global y solo debe mantenerse a través de variables. El aspecto se puede cambiar compilando variables.

[3]: vue-loader (componenteización de archivos vue): se utiliza para compilar y procesar archivos *.vue. Un archivo vue es un componente independiente que tiene un alto grado de independencia. mantener. La división de componentes puede ser grande o pequeña. Una página también puede considerarse como compuesta por varios componentes de vue. Una página también puede ser un componente de vue. La estructura del archivo de vue es la siguiente:

[4]: babel-loader: implementación Análisis de compilación de archivos vue con sintaxis es6

[5]: vue-router: usado para distribución de enrutamiento

[5]: vue-router: usado para enrutamiento La distribución del enrutamiento y la documentación son muy completas (). Este archivo vue se utiliza para compilar y procesar *.Net.

[6]: vue-router: Se utiliza para distribuir rutas, la documentación es muy completa (más información: /index.html).

[6]: vue (método de complemento): Vue en sí proporciona un método de inyección de instalación y podemos inyectar algunos globales (propiedades, métodos y componentes comunes de la interfaz de usuario).

El siguiente es el significado de la carpeta:

carpeta común: se usa para almacenar algunas cosas de uso común, como estilos, js globales, etc.

Carpeta de componentes: se utiliza para almacenar componentes independientes. Planeo hacer subdivisiones posteriores, como componentes de interfaz de usuario, componentes de página, etc. Este es un esfuerzo de equipo y luego se puede convertir en una biblioteca de componentes independientes. . Este es el trabajo del equipo y puede convertirse en una biblioteca de componentes independiente en el futuro.

Carpeta de filtros: se utiliza para colocar operaciones de filtrado de uso común.

Carpeta de complementos: se utiliza para colocar Vue.use inyectado en la biblioteca de complementos global de Vue, como carga de solicitudes, cuadros emergentes, paginación, componentes de interfaz de usuario, etc.

Los complementos simplemente exponen los componentes al Vue global.

carpeta de vistas: se utiliza para almacenar módulos de página

archivo app.vue: módulo principal de la aplicación cuando se inicia por primera vez

archivo app.js: antes del inicio Cargando, inyectando , creando una instancia

archivo router.config.js: módulo de enrutamiento

Actualmente, esta arquitectura se aplica a arquitecturas SPA front-end y back-end. La arquitectura SPA es aplicable a todos y puede que todavía haya muchas imperfecciones, pero todavía soy muy joven y vue todavía es muy joven. Espero que puedan brindar algunas oportunidades a más jóvenes.