my demos

개발에 일반적으로 사용되는 데모

Vue-cli 및 Element-ui 사용하여 일상적인 개발에서 접하는 예제를 작성하세요.

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

방문 주소:

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

새 프로젝트

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

참고: vue-cli 4.x는 webpack 관련 구성을 프로젝트에 직접 추가하지 않고 대신 create-react-app과 유사한 npm 스크립트를 사용하여 프로젝트를 단순화합니다. 하지만 구성을 수정하고 싶다면 어떻게 해야 할까요? 실제로 이는 일부 기본 구성을 사용하는 것과 동일합니다. 이 기본 구성을 사용하지 않으면 일부 구성을 직접 작성하고 이를 vue.config.js에 작성하여 원래 구성을 덮어쓸 수 있습니다. 예를 들어, 패키지된 리소스 경로를 수정하려면 다음을 추가합니다.

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

데모

클립보드.js

클릭하여 복사 기능: 호환성 문제 통합 처리

npm install -S clipboard

swiper.js

캐러셀 및 슬라이딩 구성요소: 공식 웹사이트에서는 사용할 수 없는 매우 일반적인 예를 구현합니다.

npm install -S swiper

mockjs

데이터 시뮬레이션

npm install -S mockjs

이 도구를 사용하여 데이터를 시뮬레이션할 수 있으며 데모를 작성하는 데 필수적인 도구입니다.

재설정.css

브라우저 간의 차이점 제거

npm install -S reset-css

프로젝트에 직접 도입하면 됩니다.

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

아이콘폰트——SVG

SVG를 사용하여 아이콘을 도입하려면 먼저 필요한 아이콘을 iconfont 웹 사이트의 프로젝트에 넣고 기호를 선택하면 아래에 주소가 나타납니다. 이 주소에 방문하시면 js의 일부를 보실 수 있습니다. 이 js를 프로젝트에 도입하시면 프로젝트에서 바로 사용하실 수 있습니다.

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

QR코드

QR 코드 생성

npm install -S qrcode

메스크롤

풀업하여 로드 풀다운하여 플러그인 새로 고침

npm install -S mescroll.js

sortable.js

드래그하여 정렬

npm install -S sortablejs

자주 발생하는 문제인 드래그 정렬은 Vue 또는 React와 같은 프레임워크의 페이지에 있는 DOM 요소와 데이터를 동기화하는 방법입니다.

Vue 수정자

Vue 수정자는 기본적으로 공식 웹사이트의 데모입니다.

AES 암호화

AES는 대칭 암호화 방법으로, 암호화 모드에는 주로 다음이 포함됩니다.

1. 전자 코드북(ECB) 2. 암호 블록 체인(CBC) 3. 계산기 모드(카운터(CTR)) 4. 암호 피드백(CFB) 5 .출력 피드백(OFB)

npm install -S aes-js

관심이 있으시면 구체적인 내부 원칙에 대해 자세히 알아볼 수 있습니다.

localStorage 및 SessionStorage를 사용하여 데이터를 로컬에 저장하면 암호화 작업을 수행하여 데이터의 보안 수준을 향상시킬 수 있습니다.

lib-flexible 모바일 터미널 적응