Vue template web

Vue-template-web es una plantilla de página de inicio sencilla que utiliza vue element-ui

Introducción:

Este proyecto es una página de plantilla simple y una estructura básica, que se puede transformar fácilmente en páginas promocionales, páginas temáticas, páginas de sitios web oficiales, etc.

Implementación del proyecto:

1. Página de anclaje de desplazamiento de encuadernación bidireccional.
2. Soporte de internacionalización i8n de vue element-ui.
3. Modifique el tema del color del tema.
4. Vuex almacena en caché de forma persistente el tema y el idioma seleccionados por el usuario.
5. Usó la biblioteca de íconos de fuentes iconfont.
6. Encapsula una solicitud de axios.

Estructura del proyecto:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

Representación:

Cómo correr:

-.Clonar el proyecto ( git clone https://github.com/pjqdyd/Vue-template-web.git ).

- Ejecute npm install para descargar las dependencias (si la descarga es lenta: npm install --registry=https://registry.npm.taobao.org ).

- Ejecute npm run serve para iniciar el proyecto y visite http://localhost:8080 para explorar la página.

-.Ejecute npm run build para compilar y empaquetar el proyecto.

Aviso:

1. La nueva rama Vue-template-web-cdn usa CDN para cargar algunas dependencias, lo que evita que el archivo js sea demasiado grande después del empaquetado y que la primera pantalla tarde demasiado en cargarse.

Probado:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

Por lo tanto, se recomienda utilizar la rama Vue-template-web-cdn;

2. Después de optimizar el desplazamiento utilizando el punto de anclaje window.scrollTo (opciones), preste atención a la compatibilidad del navegador: window.scrollTo es compatible. Por supuesto, puede elegir la versión de envío anterior para que sea compatible con otros navegadores;

pista:

1. El proyecto implementa la internacionalización vue element-ui i8n. El cambio de chino e inglés define dos conjuntos de idiomas, que se definen en i18n/langs/.

2. Implementación del cambio de tema:

Anteriormente, se implementaba con referencia al caso de cambio de máscara oficial. El color se puede cambiar junto con los componentes de ElementUI. Dado que este método es más engorroso y puede causar errores desconocidos, actualmente usamos guardar directamente un valor de color para cambiar el tema. y pase this.$ en el proyecto. store.state.theme puede obtener el valor del color del tema.
(Más recomendado: puede usar variables css var para vincularse al elemento raíz y cambiar el estilo).

3. El desplazamiento del ancla de página se refiere a este proyecto de código abierto.

4. El proyecto encapsula la solicitud de axios y vincula el atributo global $globalRequest. Puede llamar al método de solicitud asincrónica test4() en cualquier página await this.$globalRequest.test4(arg);

5. Si el proyecto encuentra áreas que se pueden mejorar, puede plantear un tema de mejora.