Introduzione ai componenti comuni e alla struttura della struttura del framework di progetto vue

Struttura di base del progetto Vue

Un progetto Vue, penso che il minimo insieme sia {vue,vue-router,component}, Vue come libreria di base, ci fornisce funzioni come bindegaggio bidirezionale. Vue-router connette diverse "pagine", component come output di stile o comportamento, puoi realizzare il sito SPA statico di base attraverso questi tre elementi. Certo, non parlerò del concetto ampio di Vue全家桶, ma elencherò i punti tecnici principali come un tesoro.

1.vue-cli: costruzione della struttura di base del progetto Vue, strumento di impalcatura

2.sass-loader&node-sass: utilizzo Sass come strumento precompilato per i nostri stili, entrambi sono essenziali, anche meno, come less e stylus, possono essere scelti liberamente

3.postcss: chiave per implementare la layout responsive, px=>rem. La grande sabbia ha proposto un piano di layout basato su vw,vh, ma al momento sto mantenendo un atteggiamento di osservazione.

4.vuex: strumento per gestire il flusso dei dati complessi, lo stato machine e un Flux specializzato

5.vuex-persistedstate: strumento per persistere lo stato Vuex

6.vue-router: implementazione del passaggio tra le "pagine" di SPA

7.vue-lazyload: implementazione del caricamento lento delle immagini e ottimizzazione delle prestazioni di trasmissione HTTP

8.vue-awesome-swiper: implementazione della funzione di rotazione e completamento di alcuni effetti di transizione speciali

9.better-scroll: implementazione della scorrimento della lista e dei problemi di scorrimento tra componenti genitore e figlio

10.axios: strumento di strumenti HTTP, per richiedere dati API e implementare拦截器

11.fastclick: libreria per risolvere il ritardo di 300ms

Tutto questo, secondo me, è ciò che una grande o media progetto Vue necessita, ci sono anche alcune cose come la sintassi JSX che ho utilizzato per l'upload delle immagini, che richiede babel-jsx e non ha una universalità, quindi non lo elencherò.

Di seguito, descriverò brevemente tutto ciò che è stato menzionato sopra, alcune cose saranno esposte in dettaglio:

1.vue-cli：

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

Il strumento di impalcatura, dopo aver scelto Vue come nostra tecnologia di sviluppo, dobbiamo iniziare a costruire la struttura del nostro progetto e l'ambiente di sviluppo. Dopo aver installato Node, possiamo procedere con il comando per l'installazione

npm install -g vue-cli 将vue-cli安装到全局环境

npm install -g vue-cli Installa vue-cli nell'ambiente globale

vue init webpack my-vue-demo Crea un progetto Vue chiamato my-vue-demo basato sul template webpack

Le nostre template ci sono sei, ma quello che usiamo di più è webpack.

Durante il processo, vedrai strumenti di test unitari come e2e e strumenti di verifica della qualità del codice come ESLint, penso che non sia necessario installarli.

Allora, ciò che ci interessa di più è il contenuto nella cartella src. Puoi vedere l'immagine qui sotto

L'immagine qui sopra è una struttura di base di Vue molto matura nel progetto, escludendo la struttura di base di vue-cli.

2&3 :sass,postcss

L'era in cui scrivere direttamente CSS è passata, i preprocessori di stili precompilati ci aiutano a liberare la produzione e a migliorare l'efficienza. Sass, less, stylus hanno pro e contro, e hanno anche i loro seguaci.

Funzioni comuni di postcss

px2rem => Può aiutarci a realizzare la conversione da px a unità rem, è sufficiente definire gli standard di conversione corrispondenti.

autoprefixer => El processo di compatibilità, postcss può aiutarci a gestirlo anche.

//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 progetto Vue medio-grande richiede sicuramente una gestione complessa degli stati. Un event bus semplice non è più adatto.

L'architettura Flux specializzata, Vuex si posiziona direttamente in cima. In breve: è uno strumento di gestione degli stati per affrontare sia le operazioni utente, che le risposte API, che i cambiamenti di URL e altro. Parlerò in dettaglio di Vuex in seguito.

Chi ha utilizzato Vuex ha notato un punto molto doloroso: lo stato di Vuex viene rilasciato ogni volta che si ricarica. Alcuni stati sono buoni, ma se mancano possiamo far rientrare l'utente per una nuova operazione. Tuttavia, operazioni come il login non possono essere fatte solo con un riavvio. Certamente, potresti dire che possiamo salvare nei local o nei cookie. È possibile! Ma in questo modo, lo stato si forma in una relazione debole con i dati locali, diventando molto fragile, poiché non si può prevedere quando si potrebbe dimenticare di scrivere un metodo come setStore. Vuex-persistedstate ci aiuta a risolvere questo problema, mappando direttamente lo stato all'ambiente di cache locale, possiamo utilizzare la funzione assistente mapState fornita da Vuex nei computed per aggiornare dinamicamente i dati locali. E anche senza stato persistente, possiamo ancora liberare la cache tramite il riavvio.

6.vue-router

Quando utilizziamo Vue per costruire applicazioni SPA, significa che abbiamo completamente separato il front-end dal back-end. O, per essere più semplici: questo è un progetto puramente front-end. Il back-end fornisce solo dati, e qualsiasi logica viene implementata sul front-end. Poiché ci siamo 'staccati' dal back-end, ovviamente non ci sono mapping di URL sincroni come request Mapping. Pertanto, il front-end deve utilizzare il router per realizzare il passaggio tra le 'pagine' front-end. Vue-router ci aiuta a fare questo, fornendo guardiani di rotta che possiamo impostare a livello globale o componenti, per implementare logica aziendale specifica. Fornisce animazioni di transizione per presentare meglio le caratteristiche delle applicazioni SPA, ecc., di cui parlerò in dettaglio in seguito.

7.vue-lazyload

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

Realizzare il caricamento lento delle immagini. Questo è un problema fondamentale per l'ottimizzazione delle prestazioni front-end: le immagini. Il caricamento lento può ridurre il numero di richieste e, in termini di visibilità, offre una transizione fluida. Naturalmente, anche per le immagini dobbiamo fare alcune operazioni, come utilizzare il formato webp per ridurre la qualità delle immagini o utilizzare oss per trattare le immagini.

8.vue-awesome-swiper

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

Attraverso di esso, si può realizzare il basic carousel, la commutazione dell'asse orizzontale, lo scorrimento della lista dell'asse orizzontale, ecc.

Ad esempio, voglio implementare la funzione di commutazione di quattro schede, ma penso che l'effetto semplice di display non sia soddisfacentemente soddisfacente. Pertanto, possiamo implementare attraverso swiper, ogni contenuto della scheda corrisponde a un swiper-item di swiper. La scheda di commutazione è in realtà una pagina successiva o una pagina precedente nel swiper.

data(){
　　return{
　　　　swiperOption: {
  slidesPerView :'auto',
  direction: 'orizzontale',
  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}}/giorno</span>
  </router-link>
  </swiper-slide>
 </swiper>
 <p class="noData" v-else></p>

9.better-scroll

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

Realizzazione della scorrimento della lista dell'asse verticale e il problema di prevenire il routing padre dallo scorrimento del routing figlio quando ci sono routing annidati, realizzato tramite better-scroll.

better-scroll può anche implementare lo scorrimento orizzontale, ma perché non utilizzare better-scroll per gestirlo? Questo è perché, quando better-scroll implementa lo scorrimento orizzontale, non possiamo trascinare verso il basso la pagina all'interno dell'area di contenuto di better-scorll. Questo porta a un bug: nell'area di scorrimento orizzontale di better-scroll, la pagina non si può muovere.

Come mostrato nell'immagine: ci sono contenuti in scorrimento orizzontale sotto l'asse orizzontale, ma non è possibile trascinare verso il basso nell'area indicata dall'immagine. Pertanto, lo scorrimento dell'asse orizzontale è anche implementato tramite vue-awesome-swiper.

10.axios

La funzione di base è quella di richiedere i dati dell'interfaccia back-end tramite axios. E axios può lavorare meglio con router per implementare funzionalità simili a filtri back-end, ad esempio, gestire problemi come la scadenza del token. Poiché quando il token scade, è un po' difficile gestirlo solo tramite router.beforeEach di vue-router. In questo caso, è necessario gestire l'URL con il codice di risposta del back-end.

11.fastclick

Risoluzione del problema di trasparenza e ritardo del click https://it.oldtoolbag.com/article/131369.htm

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il diritto d'autore è proprietà del rispettivo proprietario, il contenuto è stato caricato autonomamente dagli utenti di Internet, il sito web non possiede il diritto di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente i contenuti sospetti di violazione del copyright.