程序员的资源宝库

网站首页 > gitee 正文

VueKoa2移动电商实战 (二)vant组件的引入和移动端屏幕的适配

sanyeah 2024-03-29 15:20:41 gitee 7 ℃ 0 评论

 

这节我们学习如何优雅的引入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)

 

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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表