vue3.0使用vant组件的过程

本文介绍了如何在Vue3项目中使用Vant组件库,包括创建项目、安装 vant@next、设置px转rem以及配置postcss相关依赖。在main.js中引入Vant并配置根元素字体大小,同时解决postcss-pxtorem版本问题。
摘要由CSDN通过智能技术生成

创建项目

  • vue create yxsc_project

安装vant组件库

第一步:

安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next)

第二部:

vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸)
配置rem的根元素字体大小 安装lib-flexiable 安装命令 npm i amfe-flexible --save
注意
这里会报错 postCss 需要8的版本
所以这里建议对postcss-pxtorem进行降级

降级命令 npm install postcss-pxtorem@5.1.1 --save

使用vant组件库
 

  • 在main.js中引入vant组件库
    import vant from 'vant'
    createApp(App).use(vant).$mount('#app)
  • 在main.js中导入配置根节点字体大小的方法
    import 'amfe-flexible'
  • 接下来在项目根目录中新建一个postcss.config.js 写入以下代码
// postcss.config.js
module.export
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值