手把手教你使用vue3.0版本安装vant3 ui框架教程_vant3.0

目录

vant3.0项目部署

通过 npm 安装

通过 CDN 安装

手机端Rem 布局适配

---

适配效果：

通过 npm 安装

在现有项目中使用 Vant 时，可以通过 npm 进行安装：

# Vue 3 项目，安装最新版 Vant
npm i vant
 
# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

当然，你也可以通过 yarn 或 pnpm 进行安装：

# 通过 yarn 安装
yarn add vant
 
# 通过 pnpm 安装
pnpm add vant

通过 CDN 安装

使用 Vant 最简单的方法是直接在 HTML 文件中引入 CDN 链接，之后你可以通过全局变量 vant 访问到所有组件。

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
/>
 
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>

手机端Rem 布局适配

技术选型：Vue3、Vant3移动端ui框架

手机端适配：

vant3配置手机端适配，采用Rem 布局适配，官网有文档可查看

需要使用 rem 单位进行适配，推荐使用以下两个工具：

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

具体步骤：

1.安装 postcss-pxtorem  lib-flexible

• yarn方式

yarn add amfe-flexible --save
 
yarn add postcss-pxtorem@5.1.1 --save

•  npm 方式

npm install amfe-flexible --save
 
npm install postcss-pxtorem@5.1.1 --save

2.PostCSS 配置

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

新建 postcss.config.js文件

Tips: 在配置 postcss-pxtorem 时，同样应避免 ignore node_modules 目录，否则会导致 Vant 样式无法被编译。 

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7',"Chrome > 31","ff > 31","ie >= 8"],
        },
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
            // rootValue:37.5,
            rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
            // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
            propList: ['*'],
            selectorBlackList:['van']//van标记的标签, 不对其进行转换
        },
    },
}
'
运行
运行

 3.main.js引入

import vant from 'vant';
import 'vant/lib/index.css';
 
import 'amfe-flexible'
 
......
 
const app = createApp(App)
app.use(store).use(router).use(vant).mount('#app')

⭐️⭐️⭐️  作者：船长在船上

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/970870