my demos

Démos couramment utilisées en développement

Utilisez Vue-cli et Element-ui pour écrire des exemples rencontrés dans le développement quotidien.

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

Adresse de visite :

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

Nouveau projet

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

Remarque : vue-cli 4.x n'ajoute pas directement les configurations liées au webpack au projet, il utilise plutôt un script npm, similaire à create-react-app, qui simplifie le projet. Mais que se passe-t-il si l’on souhaite modifier la configuration ? En fait, cela équivaut à avoir des configurations par défaut. Si nous n'utilisons pas cette configuration par défaut, nous pouvons écrire nous-mêmes certaines configurations et les écrire dans vue.config.js pour écraser les configurations d'origine. Par exemple, si je souhaite modifier le chemin des ressources packagées, j'ajouterais :

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

Démo

presse-papiers.js

Fonction Click-to-copy : gestion unifiée des problèmes de compatibilité

npm install -S clipboard

swiper.js

Carrousel et composants coulissants : implémentez un exemple très courant qui n'est pas disponible sur le site officiel :

npm install -S swiper

mockjs

Simulation de données

npm install -S mockjs

Vous pouvez utiliser cet outil pour simuler des données, et c'est un outil essentiel pour nous pour écrire des démos.

réinitialiser.css

Supprimer les différences entre les navigateurs

npm install -S reset-css

Il suffit de l'introduire directement dans le projet :

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

police d'icônes——SVG

Pour utiliser SVG pour introduire des icônes, vous devez d'abord placer les icônes requises dans un projet sur le site Web iconfont, sélectionner le symbole et une adresse apparaîtra ci-dessous. Lorsque vous visitez cette adresse, vous pouvez voir un morceau de js. Si vous introduisez ce js dans le projet, vous pouvez l'utiliser directement dans le projet.

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

code QR

Générer un code QR

npm install -S qrcode

mescroll

Tirez vers le haut pour charger, tirez vers le bas pour actualiser le plugin

npm install -S mescroll.js

triable.js

Faites glisser pour trier

npm install -S sortablejs

Le tri par glisser, un problème souvent rencontré est de savoir comment synchroniser les données avec les éléments DOM de la page dans nos frameworks comme Vue ou React.

Modificateurs de vue

Les modificateurs Vue sont essentiellement la démo sur le site officiel

Cryptage AES

AES est une méthode de cryptage symétrique. Les modes de cryptage incluent principalement les suivants :

1. Livre de codes électronique (ECB) 2. Chaînage de blocs de chiffrement (CBC) 3. Mode calculatrice (compteur (CTR)) 4. Retour de chiffrement (CFB) 5. Retour de sortie (OFB)

npm install -S aes-js

Si vous êtes intéressé, vous pouvez en apprendre davantage sur les principes internes spécifiques.

Lorsque nous utilisons localStorage et SessionStorage pour stocker des données localement, nous pouvons effectuer une opération de cryptage pour améliorer le niveau de sécurité des données.

adaptation de terminal mobile lib-flexible