uniapp+vue3项目中使用vant-weapp

创建项目

通过vue-cli命令行创建项目

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0

uni-app官网 (dcloud.net.cn)

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

打开项目

点击顶部菜单栏终端/新建终端

执行安装依赖指令

yarn install 或 npm install

安装vant-weapp

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

引入vant-weapp

在 /src目录下创建 wxcomponents 目录

复制node_modules/@vant/weapp/dist文件夹到wxcomponents文件夹

将dist文件夹改名为vant-weapp

 

 

通过HBuilder 创建项目

直接通过 git 下载 Vant Weapp 源代码，并将 dist 目录拷贝到自己的项目中。

Vant-Weapp: Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用 (gitee.com)

git clone https://api.gitee.com/mirrors/Vant-Weapp.git

 

在 /src目录下创建 wxcomponents 目录

复制Vant-Weapp/dist文件夹到wxcomponents文件夹

将dist文件夹改名为vant-weapp

在App.vue引入vant样式

在pages.json引入

局部引入

注意：你在单个页面引入了button组件，其他的页面没有引入，其他页面就使用不了，其他页面想要使用，就得在单个页面style对象{}中引入)

{
  "path": "pages/home/index",
  "style": {
    "navigationBarTitleText": "首页",
    "usingComponents": {
      "van-button": "/wxcomponents/vant-weapp/button/index"
    }
  }
}

 全局引入

"globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "uniapp",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8",
  "usingComponents": {
    "van-button": "/wxcomponents/vant-weapp/button/index"
  }
}

页面使用

常见的坑

这个时候控制台会报错

注意：

把小程序详情>本地设置>将js编译成es5，不然会飘红

重新启动项目即可

最后效果