vue项目引入vant-ui框架

消失了很久没写博客了，持之以恒的做事就是很难呢，最近一段时间工作之余开始学点vue，也是最近前端技术发展的大势所趋吧，哈哈，写一点跟vue有关的东西吧。

项目里用原生的技术写的页面太丑了，主管要求用ui框架美化一下，作为后端开发的我太难了，依然记得被前端所支配的恐惧，又要玩新花样了，加油吧programmer，向着全能进发。

废话不多说，直接进入正文：

在一堆移动端框架里面看了半天，选了评价比较好的vant，有赞前端团队基于vue开发的，npm install之后怎么搞样式都不生效，头疼，后来去官方文档仔细详勘发现漏看了一段话，过程艰难就不说了，直接说引vant框架的流程。

在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

Vue 2 项目，安装 Vant 2.x 版本：

npm i vant -S

Vue 3 项目，安装 Vant 3.x 版本：

npm i vant@next -S

我就只用了npm安装，需要cdn还有脚手架安装的小可爱去官网看看吧，对了vant的官网也是真的难找，贴地址，传送门：vant官网

这里我推荐自动按需引入，可以避免项目臃肿

自动按需引入组件 (推荐)：
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

安装插件

npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
“plugins”: [
[“import”, {
“libraryName”: “vant”,
“libraryDirectory”: “es”,
“style”: true
}]
]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
[‘import’, {
libraryName: ‘vant’,
libraryDirectory: ‘es’,
style: true
}, ‘vant’]
]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from ‘vant’;

好啦可以用啦，贴个示例：

本文地址：https://blog.csdn.net/weixin_45648976/article/details/109625341