Introducción a los componentes comunes y la estructura del framework de proyectos vue

vue项目基础结构

一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的"页面"，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态SPA网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。

1.vue-cli：搭建基本的vue项目骨架，脚手架工具

2.sass-loader&node-sass:我是使用的sass作为样式的预编译工具，两者缺一不可，大家也可以自行选择，less,stylus都可以

3.postcss:实现响应式布局的关键，px=>rem。大漠已经提出了基于vw,vh的布局方案，不过我暂时持观望态度。

4.vuex:管理复杂的数据流向，状态机工具，特化的Flux

5.vuex-persistedstate:将vuex中state持久化的工具

6.vue-router:实现SPA间“页面”之间的跳转

7.vue-lazyload:实现图片的懒加载，优化http传输性能

8.vue-awesome-swiper:轮播功能的实现及一些特殊切换效果的完成

9.better-scroll:实现列表滚动及父子组件间的滚动问题

10.axios: herramienta de http, que realiza solicitudes a datos de API y la implementación de interceptores

11.fastclick: resolver3biblioteca con 00ms de retraso

Todo lo anterior, creo que es necesario para un proyecto de vue de gran o mediano tamaño, y también hay algunas como el uso de la sintaxis jsx en la implementación de la carga de imágenes, que necesita babel-jsx y otros, que no tienen universalidad, no se mencionarán.

A continuación, se describe brevemente lo mencionado anteriormente, algunas cosas se abordarán en detalle:

1.vue-cli：

https://github.com/vuejs/vue-cli

Herramienta de andamio, cuando elegimos vue como nuestra tecnología de desarrollo, debemos comenzar a construir el directorio y el entorno de desarrollo de nuestro proyecto. Después de instalar node, instala a través de comandos como el siguiente

npm install -g vue-cli instala vue-instala cli en el entorno global

vue init webpack my-vue-demo crea un proyecto llamado my basado en la plantilla de webpack-vue-un proyecto de archivo demo de nombre vue

Aquí hay plantillas6de, aunque lo que usamos más a menudo es webpack.

durante el período, verás algunos como e2e tales herramientas de pruebas unitarias y herramientas de detección de calidad de código ESLint, creo que no es necesario instalarlas.

Entonces, realmente lo que más nos preocupa es el contenido debajo de la carpeta src. Puedes ver la imagen a continuación

La imagen anterior es una que elimina vue-la estructura básica de cli, es un esqueleto de vue bastante maduro en el proyecto.

2&3 :sass,postcss

La era de escribir css directamente ha pasado, los procesadores de estilos precompilados nos ayudan a liberar la productividad y aumentar la eficiencia. Sass, less, stylus tienen sus propias ventajas y desventajas, y tienen各自的 seguidores.

Si deseas usar sass, necesitas instalarlo.-loader y node-sass, pero node-sass no es muy fácil de instalar, está muy bloqueado, se recomienda usar el espejo de taobao. Si aún así no puedes resolver el error después de la instalación, es posible que necesites verificar si has configurado correctamente el loader en webpack.base.conf.js.

funciones comunes de postcss

px2rem => nos puede ayudar a realizar la conversión de px a la unidad rem, solo necesitas definir los estándares de conversión correspondientes.

autoprefixer => el procesamiento de compatibilidad postcss también puede ayudarnos a manejar bien.

//vue-loader.conf.js
module.exports = {
 loaders: utils.cssLoaders({
 sourceMap: isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap,
 extract: isProduction
 }),
 postcss: [
 require('autoprefixer')({
 browsers: ['iOS >= 7', 'Android >= 4.1']
 }),
 require('postcss',-px2rem')
 ({ remUnit: 64 })
 ]
}

4,5:vuex,vuex-persistedstate

https://github.com/robinvdvleuten/vuex-persistedstate

Un proyecto de Vue de gran o mediano tamaño, ciertamente tiene estados complejos que gestionar. El simple event bus ya no es adecuado.

La arquitectura Flux especializada, Vuex está justo a la altura. En pocas palabras: es nuestra herramienta de gestión de estado para manejar múltiples operaciones como interacciones del usuario, respuestas de API, cambios de URL, etc. Hablaré específicamente de Vuex más adelante.

Las personas que han utilizado Vuex encuentran un lugar muy doloroso, es que el estado dentro de Vuex, cada vez que lo recargamos, se libera. Algunos estados son buenos, si no, podemos hacer que el usuario lo haga de nuevo. Pero operaciones como el inicio de sesión, no puedes hacer que el usuario se deslice y se inicie sesión. Claro, puedes decir, podemos guardarlo en local, en cookies. ¡Sí! Pero de esta manera, el estado se forma en una asociación tenue con los datos locales, el estado parece muy frágil, porque no puedes predecir cuándo te faltaría escribir un método setStore tal.-Persistedstate nos resuelve este problema, directamente mapea el estado al entorno de caché local, podemos usar la función auxiliar mapState proporcionada por Vuex en computed para actualizar dinámicamente los datos locales. No necesitamos estado persistente, incluso podemos recargar para liberarlo.

6.vue-router

Cuando utilizamos Vue para construir aplicaciones SPA, es equivalente a separar completamente el frontend y el backend. O, en términos más sencillos: se trata de un proyecto puramente frontend. El backend solo proporciona datos, cualquier lógica se implementa en el frontend. Ya que 'nos hemos desprendido' del backend, ciertamente no hay mapping de url sincrónico como request Mapping. Entonces, el frontend necesita router para realizar la navegación de 'páginas' en el frontend. Vue-El router nos ayuda a hacer esto, proporcionándonos guardias de rutas que podemos configurar globalmente o en componentes individuales para implementar lógicas de negocio específicas. Proporciona animaciones de transición para mostrar con mayor dinamismo la esencia de las aplicaciones SPA, etc., de lo que hablaré específicamente más adelante.

7.vue-lazyload

https://github.com/hilongjw/vue-lazyload

Implementar la carga perezosa de imágenes. Esto es un problema obligatorio para la optimización del rendimiento del frontend: imágenes. La carga perezosa puede reducir el número de solicitudes y, en términos visuales, también tiene una transición buena.

8.vue-awesome-swiper

https://github.com/surmon-china/vue-awesome-swiper

A través de él se puede implementar el deslizamiento básico, el cambio horizontal, el deslizamiento de la lista horizontal, etc.

Por ejemplo, quiero implementar una función de cambio de cuatro pestañas, pero el efecto simple de display no me parece muy satisfactorio. Entonces podemos usar swiper para lograrlo, cada contenido de la pestaña se corresponde con un swiper.-El cambio de pestaña, es decir, la siguiente página o la página anterior dentro de swiper.

data(){
　　return{
　　　　swiperOption: {
  slidesPerView :'auto',
  direction: 'horizontal',
  freeMode : true,
  loop: false,
  spaceBetween: 20,
 　　　},
 }
}

<swiper :options="swiperOption" ref="swiper" v-if="list&& list.length !== 0">
  <swiper-slide v-for="(item,index) in list" :key="index" class="hot-item">
  <router-link :to="{name:'quickCar',params:{carID:item.CarID}}" class="description_car">
  <img v-lazy="item.Attachments.length !==0 && item.Attachments[0].FilePath"/>
   <span>¥{{item.price}}/日</span>
  </router-link>
  </swiper-slide>
 </swiper>
 <p class="noData" v-else></p>

9.better-scroll

https://github.com/ustbhuangyi/scroll-scroll

scroll-scroll para implementar el desplazamiento de la lista vertical y, cuando hay rutas anidadas, manejar mejor el mejor

scroll-scroll para implementar el problema de prohibir el desplazamiento del padre con el desplazamiento del hijo del mejor-scroll realmente también puede realizar el desplazamiento horizontal, pero ¿por qué no usar mejor-scroll no se puede manejar en mejor-scorll en el área de contenido del contenido de la página hacia abajo. Por lo que se produce un Bug, es que, en mejor-scroll en el área de desplazamiento horizontal, la página no se puede mover.

Como se muestra en la imagen: hay contenido debajo del desplazamiento horizontal, pero no se puede arrastrar hacia abajo en el área de la imagen. Por lo tanto, el desplazamiento horizontal también se realiza a través de vue-awesome-swiper para implementar.

10.axios

La función básica es obtener los datos de la interfaz de backend a través de axios. Y axios puede cooperar mejor con el router para implementar funciones similares a las de interceptores de backend, como manejar problemas de expiración de token. Porque cuando el token expira, solo a través de vue-El router.beforeEach del router es un poco ineficaz para manejar. En este caso, es necesario coordinar con la respuesta de respuesta de código de retroalimentación del servidor para manejar la url.

11.fastclick

Solución de problemas de transparencia y retraso al hacer clic https://es.oldtoolbag.com/article/131369.htm

Declaración: Este artículo se ha obtenido de la red, el derecho de autor pertenece al propietario original, el contenido se ha contribuido y cargado por los usuarios de Internet espontáneamente, este sitio web no posee los derechos de propiedad, no ha sido procesado editorialmente y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de violación de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w3Declaración: El contenido de este artículo se obtiene de la red, el derecho de autor pertenece al propietario original, el contenido se contribuye y carga espontáneamente por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de violación de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w