my demos

開發中常用的Demo

使用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相關的設定弄到專案中，而是使用npm script的方式，類似create-react-app，簡化了專案。但是，如果我們想要修改配置的時候，該如何做呢？其實就相當於有一些預設配置，如果我們不使用這個預設配置的話，就自己寫一些配置，寫在vue.config.js裡面，覆蓋原來的配置。例如，我想要修改打包好的資源路徑，就在這個檔案裡面加上：

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

Demo

clipboard.js

點選複製的功能：統一處理相容問題

npm install -S clipboard

swiper.js

輪播、滑動組件：實作一個官網上沒有，但是很常見的例子：

npm install -S swiper

mockjs

數據模擬

npm install -S mockjs

可以使用這個工具來模擬數據，是我們寫demo的必備工具。

reset.css

去除不同瀏覽器之間的差異

npm install -S reset-css

直接在專案中引入就可以了：

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

iconfont——SVG

使用SVG的方式引入圖標，首先需要在iconfont的網站上把需要的圖標放到一個專案裡，選擇symbol，下面會出現一個地址。訪問這個地址，就能看到一段js，將這個js引入專案中，就可以在專案中直接使用了。

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

qrcode

產生二維碼

npm install -S qrcode

mescroll

上拉加載下拉刷新的插件

npm install -S mescroll.js

sortable.js

拖曳排序

npm install -S sortablejs

拖曳排序，常遇到的問題就是，在我們Vue或React這樣的框架中，如何讓Data和頁面中的DOM元素同步。

Vue修飾符

Vue修飾符，基本上都是官網上面的Demo

AES加密

AES是一種對稱的加密方式，加密模式主要有以下幾種：

1.電碼本模式（Electronic Codebook Book (ECB)） 2.密碼分組連結模式（Cipher Block Chaining (CBC) 3.計算機模式（Counter (CTR)） 4.密碼回饋模式（Cipher FeedBack (CFB)）5 .輸出回饋模式（Output FeedBack (OFB)）

npm install -S aes-js

內部的具體原理，有興趣的話可以進一步去了解。

我們在使用localStorage、SessionStorage把資料存在本地的時候，可以進行一次加密操作，提升資料的安全等級。

lib-flexible行動端適配