Vue+Koa2移動電商實戰 （二）vant組件的引入和移動端屏幕的適配

 

這節我們學習如何優雅的引入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)

 

這一節跟我們實戰項目沒什么多大的關系，但是也是比較重要的知識點哦