0
点赞
收藏
分享

微信扫一扫

vue3.0使用vant组件的过程

small_Sun 2022-03-11 阅读 67

创建项目

  • vue create yxsc_project

安装vant 组件库

使用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.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
            rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
            // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
            propList: ['*'],
        },
    },
};

举报

相关推荐

vue3.0使用$ref

vue3.0

Vue3.0整理

vue3.0进阶

0 条评论