第一步：安裝vant

npm i vant -S // 或 yarn add vant

第二步：配置按需引入

// 在 babel.config.js 中配置 module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']] };

第三步：配置vue.config.js，中requireModuleExtension”

css: {extract: process.env.NODE_ENV !== 'development',sourceMap: false,requireModuleExtension: true,loaderOptions: {stylus: {'resolve url': true,import: ['./src/theme']}}},

第四步：在main.js 中引入并聲明

// 引入代碼 import Vue from 'vue' import {ActionSheet,AddressList,Button,Card,Cell,CellGroup,Circle,Col,Collapse,CollapseItem,ContactCard,ContactEdit,ContactList,CouponCell,CouponList,Divider,DropdownMenu,Empty,Grid,GridItem,GoodsAction,GoodsActionButton,GoodsActionIcon,Icon,Image,IndexAnchor,IndexBar,Info,Loading,NavBar,NoticeBar,NumberKeyboard,Overlay,Pagination,Panel,PasswordInput,Popup,Progress,PullRefresh,Radio,RadioGroup,Rate,Row,Search,ShareSheet,Sidebar,SidebarItem,Skeleton,Slider,Step,Stepper,Steps,Sticky,SubmitBar,SwipeItem,Switch,SwitchCell,Toast,Tab,Tabbar,TabbarItem,Tag,TreeSelect } from 'vant' Toast.setDefaultOptions({ duration: 3000 }) const vantArr = [ActionSheet,AddressList,Button,Card,Cell,CellGroup,Circle,Col,Collapse,CollapseItem,ContactCard,ContactEdit,ContactList,CouponCell,CouponList,Divider,DropdownMenu,Empty,Grid,GridItem,GoodsAction,GoodsActionButton,GoodsActionIcon,Icon,Image,IndexAnchor,IndexBar,Info,Loading,NavBar,NoticeBar,NumberKeyboard,Overlay,Pagination,Panel,PasswordInput,Popup,Progress,PullRefresh,Radio,RadioGroup,Rate,Row,Search,ShareSheet,Sidebar,SidebarItem,Skeleton,Slider,Step,Stepper,Steps,Sticky,SubmitBar,SwipeItem,Switch,SwitchCell,Tab,Tabbar,TabbarItem,Tag,TreeSelect ] vantArr.filter(e => {Vue.use(e) })Vue.prototype.$toast = Toast

總結

以上是生活随笔為你收集整理的vant按需引入没样式_vue vant-ui样式出不来的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。