my demos

Demo yang biasa digunakan dalam pengembangan

Gunakan Vue-cli dan Element-ui untuk menulis contoh yang ditemui dalam pengembangan sehari-hari.

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

Kunjungi alamat:

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

Proyek baru

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

Catatan: vue-cli 4.x tidak secara langsung menambahkan konfigurasi terkait webpack ke proyek. Sebaliknya, ia menggunakan skrip npm, mirip dengan create-react-app, yang menyederhanakan proyek. Namun bagaimana jika kita ingin mengubah konfigurasinya? Faktanya, ini setara dengan memiliki beberapa konfigurasi default. Jika kita tidak menggunakan konfigurasi default ini, kita dapat menulis sendiri beberapa konfigurasi dan menuliskannya di vue.config.js untuk menimpa konfigurasi aslinya. Misalnya, jika saya ingin mengubah jalur sumber daya yang dikemas, saya akan menambahkan:

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

Demo

clipboard.js

Fungsi klik untuk menyalin: penanganan terpadu atas masalah kompatibilitas

npm install -S clipboard

wiper.js

Komponen carousel dan geser: Terapkan contoh yang sangat umum yang tidak tersedia di situs resmi:

npm install -S swiper

mockjs

Simulasi data

npm install -S mockjs

Anda dapat menggunakan alat ini untuk mensimulasikan data, dan ini merupakan alat penting bagi kami untuk menulis demo.

reset.css

Hapus perbedaan antar browser

npm install -S reset-css

Cukup perkenalkan langsung ke dalam proyek:

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

ikonfont—SVG

Untuk menggunakan SVG untuk memperkenalkan ikon, pertama-tama Anda harus memasukkan ikon yang diperlukan ke dalam proyek di situs web iconfont, pilih simbol, dan alamat akan muncul di bawah. Saat Anda mengunjungi alamat ini, Anda dapat melihat bagian dari js. Jika Anda memasukkan js ini ke dalam proyek, Anda dapat menggunakannya langsung di proyek.

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

kode qr

Hasilkan kode QR

npm install -S qrcode

mescroll

Tarik ke atas untuk memuat, tarik ke bawah untuk menyegarkan plugin

npm install -S mescroll.js

dapat diurutkan.js

Seret untuk mengurutkan

npm install -S sortablejs

Penyortiran drag, masalah yang sering ditemui adalah bagaimana menyinkronkan Data dengan elemen DOM di halaman dalam framework kita seperti Vue atau React.

Pengubah Vue

Pengubah Vue pada dasarnya adalah Demo di situs resminya

Enkripsi AES

AES adalah metode enkripsi simetris. Mode enkripsi utamanya mencakup hal-hal berikut:

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

npm install -S aes-js

Jika Anda tertarik, Anda dapat mempelajari lebih lanjut tentang prinsip internal spesifiknya.

Saat kami menggunakan localStorage dan SessionStorage untuk menyimpan data secara lokal, kami dapat melakukan operasi enkripsi untuk meningkatkan tingkat keamanan data.

adaptasi terminal seluler fleksibel-lib