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

スワイパー.js

カルーセルとスライド コンポーネント: 公式 Web サイトでは入手できない非常に一般的な例を実装します。

npm install -S swiper

モックジェス

データシミュレーション

npm install -S mockjs

このツールを使用してデータをシミュレートすることができ、デモを作成するために不可欠なツールです。

リセット.css

ブラウザ間の差異を削除する

npm install -S reset-css

それをプロジェクトに直接導入するだけです。

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

アイコンフォント—SVG

SVG を使用してアイコンを導入するには、まず必要なアイコンを iconfont Web サイトのプロジェクトに配置し、シンボルを選択する必要があります。アドレスが下に表示されます。このアドレスにアクセスすると、js が表示されます。この js をプロジェクトに導入すると、プロジェクト内で直接使用できます。

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

QRコード

QRコードを生成する

npm install -S qrcode

メスクロール

プルアップしてロードし、プルダウンしてプラグインを更新します

npm install -S mescroll.js

ソート可能な.js

ドラッグして並べ替えます

npm install -S sortablejs

ドラッグ ソートでよく発生する問題は、Vue や React などのフレームワークでデータをページ内の DOM 要素と同期する方法です。

Vue 修飾子

Vue モディファイアは基本的に公式 Web サイトのデモです

AES暗号化

AES は対称暗号化方式で、主に次の暗号化モードがあります。

1. 電子コードブックブック (ECB) 2. 暗号ブロックチェーン (CBC) 3. 電卓モード (カウンター (CTR)) 4. 暗号フィードバック (CFB) 5 . 出力フィードバック (OFB)

npm install -S aes-js

ご興味があれば、具体的な内部原則について詳しく学ぶことができます。

localStorage と SessionStorage を使用してデータをローカルに保存すると、暗号化操作を実行してデータのセキュリティ レベルを向上させることができます。

lib-flexibleモバイル端末適応