vue3.0使用vant组件的过程

2022-09-11 14:18:48

创建项目

  • 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 vantfrom'vant'createApp(App).use(vant).$mount('#app)
  • 在main.js中导入配置根节点字体大小的方法
import'amfe-flexible'
  • 接下来在项目根目录中新建一个postcss.config.js 写入以下代码
// postcss.config.js
module.exports={
    plugins:{// postcss-pxtorem 插件的版本需要 >= 5.0.0'postcss-pxtorem':{rootValue({ file}){// 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小// 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750return file.indexOf('vant')!==-1?37.5:75;},// 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
            propList:['*'],},},};
  • 作者:```木头人```
  • 原文链接:https://blog.csdn.net/wjw0125/article/details/117411722
    更新时间:2022-09-11 14:18:48