Vue移动端组件库vant安装和引入

Vue移动端组件库vant

特点：轻量、可靠的移动端 Vue 组件库

安装

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

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面
vue ui

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

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

# 通过 npm 安装
npm i vant -S

# 通过 yarn 安装
yarn add vant

引入

全局引入

//全局安装 不推荐使用 
import Vue from 'vue';

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant)

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

# 通过npm安装

npm i babel-plugin-import  -D

# 通过yanr安装

yarn add babel-plugin-import  -D

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryN