zl程序教程

您现在的位置是:首页 >  前端

当前栏目

在Vue项目中引用vant

Vue项目 引用 Vant
2023-09-11 14:19:18 时间

1 图形界面安装


详情点击

  1. 使用命令vue ui,打开图形界面
  2. 观察图形界面中的项目是否是当前的项目,如果不是点击导入,导入自己的项目
    1. 点击左上角项目名称,点击项目管理器

在这里插入图片描述
2. 点击导入,并输入项目所在地址

在这里插入图片描述
3. 点击依赖,点击安装依赖
在这里插入图片描述
5. 输入库的名称,选择开发依赖还是运行以来,点击库进行安装

在这里插入图片描述
在这里插入图片描述

2 命令行进行安装


npm i vant -S
# 或者
yarn add vant

3 按需导入


  1. 安装插件
npm i babel-plugin-import -D
  • babel-plugin-import 在编译过程中将 import 的写法自动转换为按需引入的方式,详情点击
  1. 打开babel.config.js,输入以下代码
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
  1. 使用
import { Button } from 'vant';