English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
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: HTTP-Tool, um Daten von API anzufragen und Interceptor zu implementieren
11.fastclick: Beheben3Bibliothek mit 00ms Verzögerung
Diese hier sind alles, was ich für notwendig halte, dass ein großes oder mittleres Vue-Projekt verwenden muss, sowie einige wie das, was ich in der Implementierung von Bild hochladen verwendet habe, das Babel benötigt-jsx und ähnliche Dinge sind nicht universell und werden daher nicht aufgeführt.
Ich werde hier kurz die oben genannten Dinge zusammenfassen, einige werden einzeln im Detail besprochen:
1.vue-CLI：
https://github.com/vuejs/vue-CLI
Boardschaftswerkzeug, wenn wir Vue als unsere Entwicklungstechnologie auswählen, müssen wir mit dem Aufbau des Verzeichnisses und der Entwicklungsumgebung unseres Projekts beginnen. Nachdem Node installiert wurde, wird die Installation durch den folgenden Befehl durchgeführt
npm install -g vue-CLI wird vue-CLI in die globale Umgebung installieren
vue init webpack my-vue-demo Erstellen Sie ein Projekt namens my auf Basis des webpack-Modells-vue-demo Dateinamen für Vue-Projekte
Hier gibt es Muster6dort, aber wir verwenden am häufigsten webpack.
Während dieser Zeit werden Sie einige sehen wie z2e solche Unit-Test-Tools und ESLint, um die Codequalität zu überprüfen, finde ich, dass sie nicht installiert werden müssen.
Also, eigentlich sind wir am meisten daran interessiert, was sich im Ordner src befindet. Man kann im Bild unten sehen
Das Bild oben ist eines, das ohne Vue-Das Grundgerüst des CLI, ein ziemlich reifer Vue-Kerne im Projekt.
2&3 :sass,postcss
Die Zeit der direkten CSS-Schreibung ist vorbei, die vorcompileten Stylprocessor haben uns von der Produktionsarbeit befreit und die Effizienz erhöht. Sass, Less, Stylus haben Vor- und Nachteile und haben各自 Anhänger.
Um Sass zu verwenden, müssen Sie Sass installieren.-Loader und node-Sass, aber node-Sass ist nicht sehr einfach zu installieren, stark blockiert, daher wird empfohlen, das Spiegelbild von taobao zu verwenden. Wenn nach der Installation immer noch Fehler aufgetreten sind und nicht interpretiert werden können, müssen Sie möglicherweise in webpack.base.conf.js schauen, ob die entsprechenden Loader eingerichtet sind.
Häufig verwendete Funktionen von Postcss
px2rem => Erleichtert die Umwandlung von px in rem-Einheiten, indem Sie nur die entsprechenden Konvertierungsstandards definieren müssen.
autoprefixer => Kompatibilitätsbehandlung, Postcss kann uns auch dabei helfen, die Verarbeitung zu bewältigen.
//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
Ein großes oder mittleres Vue-Projekt hat sicherlich komplexe Zustände zu verwalten. Ein einfaches Event Bus ist nicht mehr ausreichend.
Der spezialisierte Flux-Architektur, Vuex trifft genau auf. Kurz gesagt: Dies ist unser Werkzeug zur Zustandsverwaltung für eine Vielzahl von Operationen wie Benutzeraktionen, API-Rückgaben und URL-Änderungen. Ich werde später spezifischer über Vuex sprechen.
Diejenigen, die Vuex verwendet haben, haben sicherlich einen sehr schmerzhaften Punkt bemerkt, nämlich dass der State in Vuex, wenn wir neu laden, gelöscht wird. Manche Zustände sind in Ordnung, und wenn sie verloren gehen, können wir den Benutzer einfach dazu auffordern, sie neu zu erstellen. Aber Operationen wie Anmeldungen können wir nicht so einfach dazu auffordern, dass der Benutzer nach einem Neuladen anmeldet. Natürlich, du kannst es in local oder Cookie speichern. Das geht! Aber in diesem Fall bilden der State und die Daten im local eine Art loser Verbindung, und der State erscheint sehr fragil, weil du nie weißt, ob du einen Methodenaufruf wie setStore vergessen hast. Vuex-Persistedstate löst dieses Problem für uns, indem er den State direkt in das lokale Cache-Umfeld mappings. Wir können in computed mit den von Vuex bereitgestellten mapState-Hilfsfunktionen die Daten im local dynamisch aktualisieren, ohne eine persistierte State zu benötigen. Und selbst wenn wir den Cache leeren, können wir ihn einfach neu laden.
6.vue-router
Wenn wir Vue verwenden, um SPA-Anwendungen zu erstellen, bedeutet das, dass wir Frontend und Backend vollständig voneinander trennen. Oder einfacher gesagt: Dies ist ein reines Frontend-Projekt. Das Backend stellt nur Daten bereit, und alle Logiken werden im Frontend implementiert. Da wir "losgelöst" vom Backend sind, gibt es natürlich keine solchen Synchronisations-URLs wie request Mapping. Daher muss das Frontend Router verwenden, um die "Seiten"-Wechsel im Frontend zu realisieren. Vue-Router hilft uns dabei, indem er uns die Routing-Guards bereitstellt, mit denen wir globale und komponenteninterne Routing-Guards einrichten können, um spezifische Geschäftslogiken zu realisieren. Er bietet Übergangsanimationen, um die ansprechende Erscheinung von SPA-Anwendungen besser darzustellen, etc. Dies werde ich später spezifischer erklären.
7.vue-lazyload
https://github.com/hilongjw/vue-lazyload
Implementierung der Lazy-Loading von Bildern. Dies ist ein notwendiges Problem der Frontend-Performance-Optimierung: Bilder. Lazy-Loading kann die Anzahl der Anfragen reduzieren und auch eine gute Übergangsvisuelle Erfahrung bieten. Natürlich müssen wir auch einige Maßnahmen ergreifen, um die Qualität der Bilder zu verringern, z.B. das Verwenden von webp-Format, um die Qualität der Bilder zu verringern, oder die Verarbeitung der Bilder durch oss.
8.vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper
Mit diesem können Sie grundlegende Diashows, horizontale Wechsel und horizontale Liste verschieben.
Ich möchte zum Beispiel eine Funktion wie den Wechsel von vier Tabs implementieren, aber der einfache display-Effekt ist mir nicht sehr zufrieden. Dann können wir durch swiper erreichen, dass der Inhalt jedes Tabs dem swiper entsprechen.-Der Tab-Wechsel, der im swiper ist, ist im Grunde das Nächste oder das Vorherige der Seite.
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/better-scroll
scroll zu scrollen-scroll verwendet, um das Problem zu verhindern, dass der übergeordnete Router mit dem Scrollen des Unterrouters folgt? Um die vertikale Liste zu scrollen und bei der Existenz eingebetteter Routen, durch better
better-scroll ebenfalls horizontale Scrollfunktionen implementieren kann, aber warum wird nicht better-scroll behandeln? Dies liegt daran, dass better-scroll die horizontale Scrollfunktion implementiert, wir können nicht in better-scorll im content-Bereich der content zu ziehen, was zu einem Bug führt, dass, in better-scroll in der horizontalen Scrollbereich, die Seite kann sich nicht bewegen.
Wie im obigen Bild gezeigt: Es gibt noch Inhalte unter der horizontalen Scrollleiste, aber im angezeigten Bereich kann nicht nach unten gescrollt werden. Daher ist der horizontale Scrollvorgang auch durch vue-awesome-swiper realisiert.
10.axios
Die grundlegenden Funktionen sind es, über axios Daten von Backend-Interfaces abzurufen. Und axios kann mit router besser Funktionen wie Backend-Interceptoren realisieren, z.B. das Problem der abgelaufenen token behandeln. Da das token abgelaufen ist, kann dies nur durch vue-Der router.beforeEach, um die Verarbeitung zu behandeln, ist in dieser Situation recht hilflos. In diesem Fall muss die Verarbeitung der URL mit dem von der Backend-Response zurückgegebenen code koordiniert werden.
11.fastclick
Lösen Sie das Problem der Durchdringung und des Klickverzugs https://de.oldtoolbag.com/article/131369.htm
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails zur Meldung von Verstößen und bieten Sie relevante Beweise an. Sobald nachgewiesen wird, dass Inhalte verletzt werden, wird diese Website sofort die fraglichen urheberrechtlichen Inhalte löschen.)