vue element ui scaffold webpack4
1.0.0
Se ha actualizado a webpack5 . Si necesita utilizar webpack4, puede cambiar de rama: git checkout webpack4 .
** versión vue3 + element-ui + webpack5: rama conmutable: git checkout vue3 **
Este proyecto es un proyecto de andamio de múltiples páginas y múltiples entornos que utiliza element-plus en Vue y está construido en base a webpack5.
Vista previa del efecto del proyecto 1 Vista previa del efecto del proyecto 2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
Velocidad de compilación más rápida y tamaño de archivo de paquete más pequeño.
Dos formas de generar automáticamente archivos de páginas html (implementadas por html-webpack-plugin):
Durante el desarrollo, modifique, agregue o elimine archivos svg en el directorio src/iconfont/svgs para generar automáticamente íconos de fuentes (compatibles con ttf, woff2, woff, eot, svg) y admitir estilos css y vistas previas html al mismo tiempo, recarga en caliente; Es inmediato. Puedes ver el efecto. También puedes usar npm run build-font para generar estos archivos manualmente. No es necesario ir manualmente a icomoon.io o iconfont.cn para generar y modificar íconos de fuentes, CSS y vistas previas de íconos. Implementado en base a webpack-iconfont-plugin-nodejs.
El proyecto puede utilizar Dynamic-Mocker como simulación de datos de la interfaz de back-end. Los datos de simulación se encuentran en la carpeta simulada y se implementan mediante archivos js, que son fáciles de entender, convenientes y flexibles.
Método de habilitación: 1. npm run dev iniciará el servicio simulado al mismo tiempo de forma predeterminada. 2. Ejecutar solo: npm run simulacro.
Archivo de configuración: 1. La dirección del servicio de interfaz en config/serverMap.js es: base: '"//localhost:8085"' 2. El archivo simulado/mock-config.js configura varios parámetros del simulacro.
La fuente de carga css bajo demanda apunta directamente al archivo scss de element-plus, no al archivo css precompilado. Agregue el archivo src/assets/css/element-theme/theme-changed.scss al archivo variable de tema element-plus theme-chalk/src/common/var.scss en tiempo de compilación a través del complemento join-file-content-plugin Es posible ver el efecto inmediatamente después de modificar la variable scss sin precompilar el archivo scss element-plus en un archivo css. Al mismo tiempo, se puede hacer referencia a las variables scss de element-plus en cualquier parte del proyecto.
Utilice el complemento webpack-theme-color-replacer para extraer las reglas de estilo que contienen colores de tema en el CSS al crear el paquete web y generar un archivo css/theme-colors.css. Luego, cuando la página web se esté ejecutando, descargue este archivo CSS y reemplace dinámicamente los colores que contiene con el color del tema personalizado. Dado que solo se extrae el CSS relacionado con el color, la velocidad es mucho más rápida que descargar el CSS completo de element-plus. Y no solo se pueden reemplazar los estilos de elementos adicionales, sino también los colores del tema de los estilos escritos por uno mismo en el proyecto.
Al publicar código, los archivos de asignación de código fuente se generan en una carpeta de asignación de código fuente unificada y se asignan automáticamente en el entorno de prueba. Por motivos de seguridad del código, el entorno de producción no realiza una asignación automática. Si se requiere depuración, Chrome admite la asignación manual del código fuente a través de la URL. De acuerdo con los requisitos de seguridad, el nombre de esta carpeta de asignación de código fuente es un nombre de carpeta que solo los desarrolladores conocen. O utilice un algoritmo de cifrado dinámico para generar el nombre de esta carpeta. O coloque estos archivos de mapeo de código fuente en el directorio del sitio web que requiere verificación de inicio de sesión. Modifique el nombre del directorio en la función getSourceMapPath del archivo config/index.js según sea necesario. De esta manera, cuando ocurre un error y se requiere una depuración en línea, la asignación del código fuente se puede agregar rápida y manualmente para facilitar la depuración y evitar la fuga del código fuente.
Utilice la solución simple de vw+rem para implementar un diseño responsivo. Utilice el complemento postcss-pxtorem para convertir automáticamente la unidad en css de px a rem. Durante el desarrollo, px todavía se utiliza como unidad de longitud de css. 1rem = 100px, fácil de convertir durante la depuración. Común para PC y terminales móviles (es mejor reemplazar element-plus con otros marcos de interfaz de usuario para terminales móviles).
Compatible con IE10 y superiores, Chrome, Firefox, Safari, QQ, 360, 2345 y otros navegadores. Si necesita cambiar a la versión móvil, modifique .browsersrc a la versión móvil.
npm run dev
Desarrollo local y depuración. Utilice la dirección de servicio de la interfaz de backend configurada por el desarrollador en config/serverMap.js.
npm run build-test
Se utiliza para la implementación del entorno de prueba. js tiene mapeo de código fuente, css no tiene mapeo de código fuente. Utilice la dirección de servicio de interfaz configurada mediante prueba en config/serverMap.js.
npm run build
Para implementación en entornos de producción. Utilice la dirección de servicio de interfaz configurada por prod en config/serverMap.js.
npm run build-demo
La configuración es la misma que la del entorno de producción, solo que la dirección del servicio de la interfaz es diferente. Utilice la dirección del servicio de la interfaz configurada por la demostración en config/serverMap.js.
npm run build-dev
Se utiliza para publicar e implementar en el servidor del entorno de desarrollo, adecuado para situaciones en las que se requiere la publicación en el servidor para la depuración. Utilice la dirección de servicio de interfaz configurada por el desarrollador en config/serverMap.js.
npm run build-preview
Se habilitarán datos simulados estáticos, no se requiere ningún servicio de back-end y se utilizarán datos simulados para simular llamadas ajax (siempre que la interfaz API correspondiente haya escrito datos simulados). Equivalente a npm run build --preview && npm run play-dist .
npm run play-dist
Con el directorio dist como directorio raíz, inicie un servicio http estático local para ver los resultados de ejecución del directorio dist después de la publicación.
npm run mock
Cuando el servicio de la interfaz de back-end no se ha completado, se puede utilizar para simular los datos de la interfaz de back-end para depurar la función de front-end.
npm run proxy80
Al transferir el puerto existente (puerto 80xx) al puerto 80 o al puerto 443, el puerto se puede ocultar durante el acceso y también se puede lograr el acceso https. Combinado con los hosts del sistema y configurando 127.0.0.1 como el nombre de dominio especificado, puede usar directamente el nombre de dominio para acceder a la página de depuración local, que se usa para depurar algunos escenarios donde se debe usar el acceso al nombre de dominio (como la depuración de WeChat, para más detalles, consulte: https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html).
