my demos

Demostraciones comúnmente utilizadas en el desarrollo.

Utilice Vue-cli y Element-ui para escribir ejemplos que se encuentran en el desarrollo diario.

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

Dirección de visita:

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

Nuevo proyecto

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

Nota: vue-cli 4.x no agrega directamente configuraciones relacionadas con el paquete web al proyecto. En cambio, utiliza el script npm, similar a create-react-app, que simplifica el proyecto. Pero ¿y si queremos modificar la configuración? De hecho, es equivalente a tener algunas configuraciones predeterminadas. Si no usamos esta configuración predeterminada, podemos escribir algunas configuraciones nosotros mismos y escribirlas en vue.config.js para sobrescribir las configuraciones originales. Por ejemplo, si quiero modificar la ruta del recurso empaquetado, agregaría:

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

Manifestación

portapapeles.js

Función hacer clic para copiar: manejo unificado de problemas de compatibilidad

npm install -S clipboard

deslizador.js

Carrusel y componentes deslizantes: implemente un ejemplo muy común que no está disponible en el sitio web oficial:

npm install -S swiper

simulacros

Simulación de datos

npm install -S mockjs

Puede utilizar esta herramienta para simular datos y es una herramienta esencial para que escribamos demostraciones.

restablecer.css

Eliminar diferencias entre navegadores

npm install -S reset-css

Simplemente introdúzcalo directamente en el proyecto:

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

fuente de icono——SVG

Para usar SVG para introducir íconos, primero debe colocar los íconos requeridos en un proyecto en el sitio web de iconfont, seleccionar el símbolo y aparecerá una dirección debajo. Cuando visita esta dirección, puede ver un fragmento de js. Si introduce este js en el proyecto, puede usarlo directamente en el proyecto.

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

código qr

Generar código QR

npm install -S qrcode

mescroll

Tire hacia arriba para cargar y baje para actualizar el complemento.

npm install -S mescroll.js

ordenable.js

Arrastra para ordenar

npm install -S sortablejs

Clasificación por arrastre, un problema que se encuentra a menudo es cómo sincronizar datos con los elementos DOM en la página en nuestros marcos como Vue o React.

modificadores de vista

Los modificadores de Vue son básicamente la demostración en el sitio web oficial.

cifrado AES

AES es un método de cifrado simétrico. Los modos de cifrado incluyen principalmente lo siguiente:

1. Libro de códigos electrónico (ECB) 2. Encadenamiento de bloques de cifrado (CBC) 3. Modo calculadora (Contador (CTR)) 4. Retroalimentación de cifrado (CFB) 5 .Retroalimentación de salida (OFB)

npm install -S aes-js

Si está interesado, puede obtener más información sobre los principios internos específicos.

Cuando utilizamos localStorage y SessionStorage para almacenar datos localmente, podemos realizar una operación de cifrado para mejorar el nivel de seguridad de los datos.

adaptación de terminal móvil lib-flexible