uniapp如何引入vant ui组件?
网友回复
1、新建一个uniapp项目,选择Vue2,不勾选unilcloud
2、右键项目名,选择菜单在命令行打开
3、输入 npm i vant@latest-v2
4、main.js改成这样
import App from './App' // #ifndef VUE3 import Vue from 'vue' import Vant from "vant"; import 'vant/lib/index.less' Vue.use(Vant) import './uni.promisify.adaptor' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() // #endif // #ifdef VUE3 import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) return { app } } // #endif5、根目录下新增vue.config.js
chainWebpack:(config) => { config.module .rule("mjs$") .test(/\.mjs$/) .include.add(/node_modules/) .end() .type("javascript/auto"); }6、/page/index.vue
<template> <view class="content"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item>1</van-swipe-item> <van-swipe-item>2</van-swipe-item> <van-swipe-item>3</van-swipe-item> <van-swipe-item>4</van-swipe-item> </van-swipe> <van-grid> <van-grid-item icon="photo-o" text="文字" /> <van-grid-item icon="setting-o" text="文字" /> <van-grid-item icon="home-o" text="文字" /> <van-grid-item icon="video-o" text="文字" /> <van-grid-item icon="photo-o" text="文字" /> <van-grid-item icon="setting-o" text="文字" /> <van-grid-item icon="home-o" text="文字" /> <van-grid-item icon="video-o" text="文字" /> </van-grid> <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://repo.bfw.wiki/bfwrepo/image/5ff8f9d574eb5.png" /> <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" > <template #tags> <van-tag plain type="danger">标签</van-tag> <van-tag plain type="danger">标签</van-tag> </template> <template #footer> <van-button size="mini">按钮</van-button> <van-button size="mini">按钮</van-button> </template> </van-card> <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" > <template #tags> <van-tag plain type="danger">标签</van-tag> <van-tag plain type="danger">标签</van-tag> </template> <template #footer> <van-button size="mini">按钮</van-button> <van-button size="mini">按钮</van-button> </template> </van-card> <van-sidebar v-model="activeKey"> <van-sidebar-item title="标签名称" /> <van-sidebar-item title="标签名称" /> <van-sidebar-item title="标签名称" /> </van-sidebar> <van-form @submit="onSubmit"> <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" /> <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" /> <div style="margin: 16px;"> <van-button round block type="info" native-type="submit">提交</van-button> </div> </van-form> <van-popover> <template #reference> <van-button type="primary">浅色风格</van-button> </template> </van-popover> <van-tabbar> <van-tabbar-item icon="home-o">标签</van-tabbar-item> <van-tabbar-item icon="search">标签</van-tabbar-item> <van-tabbar-item icon="friends-o">标签</van-tabbar-item> <van-tabbar-item icon="setting-o">标签</van-tabbar-item> </van-tabbar> <!-- <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" /> --> <van-button type="info">style局部定制主题的信息按钮</van-button> </view> <!-- 组件文档地址 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/popover --> </template> <script> export default { data() { return { title: 'Hello', username: '', password: '', show: true, sku: { // 数据结构见下方文档 }, goods: { // 数据结构见下方文档 }, messageConfig: { // 数据结构见下方文档 }, } }, onLoad() { this.$toast('提示文案2'); this.$dialog.alert({ title: '标题', message: '弹窗内容', theme: 'round-button' }); }, methods: { onSubmit(values) { console.log('submit', values); }, } } </script> <style> .my-swipe .van-swipe-item { color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed; } </style>
运行效果如下: