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)

这一节跟我们实战项目没什么多大的关系，但是也是比较重要的知识点哦