vant按需引入没样式_vue vant-ui样式出不来的问题

第一步：安装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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/340499.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！