【vant】--移动端vue组件库相关用法

最新推荐文章于 2025-02-14 01:45:00 发布

cdgogo

最新推荐文章于 2025-02-14 01:45:00 发布

阅读量651

点赞数

分类专栏： vue框架

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/107962347

版权

vue框架专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Vant作为移动端Vue组件库，通过npm安装，并利用babel-plugin-import插件实现自动按需引入组件，以优化项目体积。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网址：https://vant-contrib.gitee.io/vant/#/zh-CN/home

通过 npm 安装

npm i vant -S

自动按需引入组件

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 Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import './assets/css/base.css';

// 引入 Vant 组件
import 'vant/lib/index.css';
import { Button,Swipe, SwipeItem } from 'vant';

Vue.use(Button);
Vue.use(Swipe);
Vue.use(SwipeItem);