uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题 |
您所在的位置:网站首页 › el组件库能做手机端吗 › uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题 |
文章目录
使用vant步骤使用中遇到的问题在浏览器中的运行效果综上,不建议uniapp项目使用vant。
使用vant步骤
首先vant可以兼容uniapp,直接用vant版就好。微信小程序专用版本是:vant-weapp。 基本使用步骤: 1、安装 # 安装 Vant-如果你用的是vue3 $ npm install vant # 如果你用的是vue2 $ npm i vant@latest-v2 -S # 在 main.js 中引入 Vant,请注意版本的区别 import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);2、使用 在组件中使用,比如在pages/index/index.vue中: 点击按钮 export default { data() { return { showDialog: false }; }, methods: { handleClick() { this.showDialog = true; } } }; 使用中遇到的问题1、安装Vant Version 2.13.2后,导入样式,报错 Module build failed (from ./node_modules/postcss-loader/src/index.js):解决方法,修改 ~node_modules\vant\lib\index.css 文件,将该文件中的 “url” 改为 “ url” ,一共需修改2处。你没看错,加个空格就好了。 2、运行到微信小程序后,报错 VM74:9 app.js错误: TypeError: Cannot read property 'userAgent' of undefined定位问题,发现是JS的navigator对象不支持。 原因是微信小程序不支持document,window对象,所以navigator自然是无法使用的。 在浏览器中的运行效果参考文章:https://github.com/youzan/vant/issues/12421 其他问题,请参考:https://github.com/youzan/vant/issues?q=uniapp 如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。 祝你能成为一名优秀的WEB前端开发工程师! |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |