這節我們學習如何優雅的引入vant元件和移動端的適配

還是介紹下vant吧，

vant是有贊前端提供的vue的一個元件庫，有下面這些優點

1.國人制造的，符合國人審美和互動習慣

2.單元測試超過90%，有些個人的小樣是元件是不做單元測試的

3.支援babel-plugin-import引入的，按需載入，不用單獨的樣式引入

4.支援TypeScript

5.支援ssr，服務端的渲染也可以使用到這個，而我們在後面也會用到的

安裝vant

npm install vant --save

如果網速比較慢的話可以採用淘寶源的安裝方式，個人不建議使用cnpm，容易出現一些莫名其妙的bug

npm install vant --save --registry=https://registry.npm.taobao.org

引入vant

vant是支援babel-plugin-import引入的，它可以讓我們按需引入元件模組，並且不用管理我們的樣式，現在Vue專案元件庫的主流引入方法。 安裝babel-plugin-import

npm install babel-plugin-import --save-dev

在babelrc中配置plugin

"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
 
"import",{"libraryName":"vant","style":true}]
]

配置好了以後我們就可以按需使用vant元件啦

現在我們在src/main.js裡面加入下面的程式碼

Vue.config.productionTip = false
Vue.use(Button)

然後就可以愉快的玩耍啦

<van-button type="primary">Primary</van-button>

點選也是會有一定效果的。

https://youzan.github.io/vant/  這裡便是他們的文件地址啦，有興趣的小夥伴兒可以去看看

在移動端適配其實也很簡單  我們只需要三行程式碼就能搞定

  let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth; //獲取到螢幕的寬度
  //獲取最外層的dom元素
  let htmlDom = document.getElementsByTagName('html')[0];

  htmlDom.style.fontSize = htmlwidth / 20 + 'px'; //1rm=16px   這裡的換算是按照蘋果5的比列進行換算的
  console.log(htmlwidth)

這一節跟我們實戰專案沒什麼多大的關係，但是也是比較重要的知識點哦