my demos

Demos commonly used in development

Use Vue-cli and Element-ui to write examples encountered in daily development.

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

Visit address:

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

New project

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

Note: vue-cli 4.x does not directly add webpack-related configurations to the project. Instead, it uses npm script, similar to create-react-app, which simplifies the project. But what if we want to modify the configuration? In fact, it is equivalent to having some default configurations. If we do not use this default configuration, we can write some configurations ourselves and write them in vue.config.js to overwrite the original configurations. For example, if I want to modify the packaged resource path, I would add:

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

Demo

clipboard.js

Click-to-copy function: unified handling of compatibility issues

npm install -S clipboard

swiper.js

Carousel and sliding components: Implement a very common example that is not available on the official website:

npm install -S swiper

mockjs

Data simulation

npm install -S mockjs

You can use this tool to simulate data, and it is an essential tool for us to write demos.

reset.css

Remove differences between browsers

npm install -S reset-css

Just introduce it directly into the project:

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

iconfont——SVG

To use SVG to introduce icons, you first need to put the required icons into a project on the iconfont website, select symbol, and an address will appear below. When you visit this address, you can see a piece of js. If you introduce this js into the project, you can use it directly in the project.

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

qrcode

Generate QR code

npm install -S qrcode

mescroll

Pull up to load pull down to refresh plug-in

npm install -S mescroll.js

sortable.js

Drag to sort

npm install -S sortablejs

Drag sorting, a problem often encountered is how to synchronize Data with the DOM elements in the page in our frameworks like Vue or React.

Vue modifiers

Vue modifiers are basically the Demo on the official website

AES encryption

AES is a symmetric encryption method. The encryption modes mainly include the following:

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

npm install -S aes-js

If you are interested, you can learn more about the specific internal principles.

When we use localStorage and SessionStorage to store data locally, we can perform an encryption operation to improve the security level of the data.

lib-flexible mobile terminal adaptation