欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue项目引入vant-ui框架

程序员文章站 2022-03-18 10:54:47
消失了很久没写博客了,持之以恒的做事就是很难呢,最近一段时间工作之余开始学点vue,也是最近前端技术发展的大势所趋吧,哈哈,写一点跟vue有关的东西吧。项目里用原生的技术写的页面太丑了,主管要求用ui框架美化一下,作为后端开发的我太难了,依然记得被前端所支配的恐惧,又要玩新花样了,加油吧programmer,向着全能进发。废话不多说,直接进入正文:在一堆移动端框架里面看了半天,选了评价比较好的vant,有赞前端团队基于vue开发的,npm install之后怎么搞样式都不生效,头疼,后来去官方文档仔细...

消失了很久没写博客了,持之以恒的做事就是很难呢,最近一段时间工作之余开始学点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’;

好啦可以用啦,贴个示例:
vue项目引入vant-ui框架
vue项目引入vant-ui框架

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

相关标签: vue vue.js