当前位置：首页 > news >正文

Vue前端开发-Vant介绍，安装部署

news 来源：原创 2025/9/19 21:01:24

Vant 是有赞前端团队开源的移动端组件库，适用于手机端的页面，它体积轻量，Vant组件的平均体积仅有8.8KB，压缩后只有1KB;除体积轻量外，可定制又是它的另外一个特点，它不仅提供基础的UI组件，还提供丰富实用的业务组件，特别是在构建商城应用时，增加了许多移动商城内常用的业务组件，十分方便和高效。

Vant 特点

Vant是一个十分优秀的面向移动端应用的UI组件库，它体积轻量、可定制化强，特别是开发移动端商场时，该组件库是UI的首选，它的Logo 标志如下图11-1所示。
　　在这里插入图片描述
　　除了轻量和可定制化的特点外，Vant 还有以下几个主要的特点：

超过70 多个高质量组件，几乎覆盖移动端主流场景。
不需要外部依赖，也不依赖第三方的 npm 包的安装。
提供 Sketch 和 Axure 设计资源的支持，便于开发。
支持 Vue 2、Vue 3 和微信小程序前端的主流框架。
支持TypeScript 编写代码，并提供完整的类型定义。
支持主题定制，内置超 700 个主题变量，方便定制风格。

Vant 是一个面向移动端的UI组件库，它有两个非常重要的版本，一个是Vant 2，它支持现代手机端绝大部分的浏览器，但只支持Vue 2框架，并且已停止迭代新功能;另一个是Vant 4，它是目前主推版本，并且支持TypeScript语法，适用于Vue 3 应用开发。

Vant 安装与配置

因为是使用Vue 3框架开发的应用，因此，必须选择Vant 4组件库进行安装，Vant 4的安装与其他框架一样，先在应用的根目录下，执行下列终端指令：

npm install vant -S

执行上述指令后，将在当前应用中安装最新版本的Vant 组件库，即Vant 4.5.0版，指令中参数 -S 表示在package.json 中保存安装的记录，如果安装成功后，打开package.json文件，该文件中将会显示安装成功后的Vant 版本号，如下图11-2所示：
在这里插入图片描述
　　安装Vant 是使用Vant 组件库的第一步，完成成功后，还需要在应用中配置Vant组件库，才能在应用的各个组件中使用，配置的方法很简单，只需要在main.js文件中导入Vant模块和对应的CSS文件，并将导入的Vant模块挂载到Vue 实例上即可。

先在src 目录下，打开main.js文件，加入如下所示代码：

import { createApp } from 'vue'
import App from './App.vue'
...
import Vant from 'vant'
import 'vant/lib/index.css';
let app = createApp(App);
...
app.use(Vant);
app.mount('#app')

在上述代码的加粗部分中，先导入安装成功的vant 模块，再导入模块所依赖的样式文件index.css，完成这两步操作后，最后将导入的Vant模块使用应用的use方法，挂载到Vue实例app中，这种挂载方式可以使用全部的Vant UI组件，也可以按需导入某些组件，例如：在某组件中，只需要使用 Button组件，代码如下所示：

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

在上述加粗代码中，只导入了Button组件和对应的样式，实现了按需加载组件的方式，相比与加载全部组件而言，这种方法更加轻巧，但加载相对麻烦，大部分开发者都是使用第一种方式，即一次性加载全部组件，因为它的体积非常小，即使加载全部也不会影响性能。
在这里插入图片描述

Vant 特点

Vant 安装与配置

相关文章：