html页面如何按需导入vant,Vant 快速上手

脚手架

在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目# 安装 Vue Cli

npm install -g @vue/cli

# 创建一个项目

vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示

vue ui

在图形化界面中，点击依赖 -> 安装依赖，然后将 vant 添加到依赖中即可。

通过 npm 安装

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

npm i vant -S

# 通过 yarn 安装

yarn add vant

示例工程

我们提供了一个基于 Vue Cli 的示例工程，示例工程会帮助你了解如下内容：基于 Vant 搭建单页面应用，配置按需引入组件

配置基于 Rem 的适配方案

配置基于 Viewport 的适配方案

配置基于 TypeScript 的工程

配置自定义主题色方案

引入组件

方式一. 自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式# 安装插件

npm i babel-plug