vue3中使用vant组件按需引入 和 Toast组件报错 Toast is not define
main.js中:

import { createApp } from 'vue'
import 'lib-flexible/flexible'
import App from './App.vue'
                                                                                                 
//vant组件引入     
import {
    Button,
    Form,
    Calendar,
    Picker,
    Field,
    Cell, 
    CellGroup,
    popup,
    area,  
    Badge,
    Grid,GridItem,
    Checkbox, CheckboxGroup,
    Col, Row,
    RadioGroup, Radio,
    DropdownMenu, DropdownItem,
    
} from 'vant';

// app.config.globalProperties.$Toast = Toast;
// import 'vant/lib/button/style';
import 'vant/lib/index.css';
//路由组件引入
import router from './router';
//数据请求接口

// 引入资源
createApp(App)
    .use(Button)
    .use(Field)
    .use(Form)
    .use(Calendar)
    .use(Picker)
    .use(Cell)
    .use(CellGroup)
    .use(popup)
    .use(area)
    .use(Badge) 
    .use(Grid)
    .use(GridItem)
    .use(Checkbox)
    .use(CheckboxGroup)
    .use(Col)
    .use(Row)
    .use(Radio)
    .use(RadioGroup)
    .use(DropdownMenu)
    .use(DropdownItem)
   
    .use(router)
.mount('#app')

Toast 轻提示 也这样引入的话报错Toast is not defined,网上找了下解决方案:app.config.globalProperties.$Toast = Toast;但是这样还报错,我是在组件中单独引入的话: import { Toast } from “vant” 有效果(Vue3和vant都是在学着用,练习写demo,也不知道这样写合适着没,应该是有其它更好的解决方案,后续遇到了会继续补充,先这样吧)

Logo

前往低代码交流专区

更多推荐