my demos

Demos, die häufig in der Entwicklung verwendet werden

Verwenden Sie Vue-cli und Element-ui um Beispiele zu schreiben, die in der täglichen Entwicklung vorkommen.

 # 部署方法
git subtree push --prefix=dist origin gh-pages

Besuchsadresse:

https://beat-the-buzzer.github.io/my-demos

Neues Projekt

npm install -g @vue/cli # 全局安装vue-cli
vue create my-demos # 新建项目
npm install -S element-ui # 安装element-ui
npm install -S vue-router # 安装vue-router

Hinweis: vue-cli 4.x fügt Webpack-bezogene Konfigurationen nicht direkt zum Projekt hinzu, sondern verwendet ein npm-Skript, ähnlich wie „create-react-app“, was das Projekt vereinfacht. Was aber, wenn wir die Konfiguration ändern möchten? Tatsächlich ist es gleichbedeutend mit einigen Standardkonfigurationen. Wenn wir diese Standardkonfiguration nicht verwenden, können wir einige Konfigurationen selbst schreiben und sie in vue.config.js schreiben, um die ursprünglichen Konfigurationen zu überschreiben. Wenn ich beispielsweise den Pfad der gepackten Ressource ändern möchte, würde ich Folgendes hinzufügen:

 module . exports = {
  //=>process.env.NODE_ENV：环境变量中存储的是开发环境还是生产环境
  publicPath : process . env . NODE_ENV === 'production' ? './' : '/' ,
} 

Demo

clipboard.js

Click-to-Copy-Funktion: einheitliche Behandlung von Kompatibilitätsproblemen

npm install -S clipboard

swiper.js

Karussell- und Schiebekomponenten: Implementieren Sie ein sehr häufiges Beispiel, das nicht auf der offiziellen Website verfügbar ist:

npm install -S swiper

Mockjs

Datensimulation

npm install -S mockjs

Mit diesem Tool können Sie Daten simulieren und es ist für uns ein unverzichtbares Tool zum Schreiben von Demos.

reset.css

Entfernen Sie Unterschiede zwischen Browsern

npm install -S reset-css

Führen Sie es einfach direkt in das Projekt ein:

 import 'reset-css' ; // 引入CSS重置的模块

Iconfont – SVG

Um SVG zum Einführen von Symbolen zu verwenden, müssen Sie zunächst die erforderlichen Symbole in ein Projekt auf der Iconfont-Website einfügen, ein Symbol auswählen und unten wird eine Adresse angezeigt. Wenn Sie diese Adresse besuchen, können Sie einen Teil von js sehen. Wenn Sie diesen js in das Projekt einführen, können Sie ihn direkt im Projekt verwenden.

 import './common/iconfont' ; // 引入SVG

qrcode

QR-Code generieren

npm install -S qrcode

mescroll

Nach oben ziehen, um das Plugin zu laden, und nach unten ziehen, um es zu aktualisieren

npm install -S mescroll.js

sortable.js

Zum Sortieren ziehen

npm install -S sortablejs

Drag-Sortierung, ein häufig auftretendes Problem besteht darin, Daten mit den DOM-Elementen auf der Seite in unseren Frameworks wie Vue oder React zu synchronisieren.

Vue-Modifikatoren

Vue-Modifikatoren sind im Grunde die Demo auf der offiziellen Website

AES-Verschlüsselung

AES ist eine symmetrische Verschlüsselungsmethode. Die Verschlüsselungsmodi umfassen hauptsächlich Folgendes:

1. Electronic Codebook Book (ECB) 2. Cipher Block Chaining (CBC) 3. Rechnermodus (Counter (CTR)) 4. Cipher FeedBack (CFB) 5. Output FeedBack (OFB)

npm install -S aes-js

Bei Interesse erfahren Sie hier mehr über die konkreten internen Grundsätze.

Wenn wir localStorage und SessionStorage zum lokalen Speichern von Daten verwenden, können wir einen Verschlüsselungsvorgang durchführen, um die Sicherheitsstufe der Daten zu verbessern.

lib-flexible Anpassung mobiler Endgeräte