uniapp项目中引入vant

码龄5年

关注

原创最新推荐文章于 2026-02-19 15:30:32 发布 2.9k 阅读

uniapp引入 vant 2.创建 uniapp 项目,在根目录下新建一个文件夹wxcomponents ，将下载好的压缩包中的 dist 文件夹放到 wxcomponents 里, 推荐将 dist 重命名为 vant,方式二：通过npm install 方式引入 npm i @vant/weapp -S --production。下载对应版本的压缩包,将文件解压后备用,确保下载的压缩包里有dist 文件夹。4.在pages.json页面将vant的组件注册到对应的页面。一、下载vant源码。阅读详情

uniapp项目引入vant-UI 引入方式和踩到的坑

uniapp框架可以写多端的项目和生成多端代码，在引入vant-UI时要确定是写那个端的项目，小程序端和H5项目引入vant组件是不一样的。这个对于刚用uniapp的搬砖人很不友好，容易搞错。今天简单把两种引入的方式在这里讲一下希望能帮到一些人。

uniapp小程序引入vant方法

.在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级

2.前往https://github.com/youzan/vant-weapp下载压缩文件
将该项目的dist文件夹替换步骤1的dist文件夹

3.App.vue的style中引入样式
@import “/wxcomponents/vant/dist/common/index.wxss”;

4.使用:在pages.json中引入相应的组件下面以要使用button组为例

也可以在全局的globalStyle中引入

“usingComponents”: {
“van-button”: “/wxcomponents/vant/dist/button/index”
}

页面中:
在这里插入图片描述
完成
5.使用其他组件可参考官网

uniapp写H5项目引入vant-UI

1.首先使用npm i vant -S --production 安装vant的组件包，安装成功后结构目录如下
在这里插入图片描述
2.5.安装官方给出的引入方式引入组件，通常我都是引入全部组件，在main.js里面添加ja

import Vue from 'vue'
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

运行后会出现下图这种错误
在这里插入图片描述
这是HBuild X的buy已通过了不少个版本都没有修复，出现这个是由于在main.js中引入vant样式import 'vant/lib/index.css’时出现了错误git
3.创建一个html的模板文件，我命名为model.html

<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

4.在manifest.json的H5配置中将其做为index.html模板导入
在这里插入图片描述
以后保存后发现错误没有了，可是如今用vant组件会发现仍是没有样式we
5.在对应的页面引入vant样式，使用Vnat组件的页面中样式已经出现了，可是又部分的样式会不许确

@import 'vant/lib/index.css'

6.进行了以上操作后我们只需要在所用到的页面中直接使用组件就行了

<van-popover
  v-model="showPopover"
  trigger="click"
  :actions="actions"
  @select="onSelect"
>
  <template #reference>
    <van-button type="primary">浅色风格</van-button>
  </template>
</van-popover>


import { Toast } from 'vant';

export default {
  data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
    };
  },
  methods: {
    onSelect(action) {
      Toast(action.text);
    },
  },
};

收录于