广场 › 开发技术 › vant全局引入和按需加载

青衣 发表于 2021-7-14 09:41:51

vant全局引入和按需加载

1、下载vant
npm i vant -S2、main.js中全局引入
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)3、使用
    <van-button type="primary" @click="()=>{this.$toast.success('成功文案')}">主要按钮</van-button>
    <van-cell is-link @click="show=true">展示弹出层</van-cell>
    <van-popup v-model="show">内容</van-popup>按需引入（推荐）：
1、下载插件
npm i babel-plugin-import -D2、在 .babelrc 中添加配置（如果没有该文件则创建，放在根目录下）
{
"plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es", // webpack 1 无需设置 libraryDirectory
      "style": true
    }]
]
}3、对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
    [
      'component',
      {
      libraryName: 'element-ui',
      styleLibraryName: 'theme-chalk'
      }
    ],
    [
      'import',
      {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
      },
      'vant'
    ]
]
}4、main.js中按需引入
import { Button, Toast, Cell, Popup } from 'vant'
Vue.use(Button).use(Toast).use(Cell).use(Popup)5、使用
    <van-button type="primary" @click="()=>{this.$toast.success('成功文案')}">主要按钮</van-button>
    <van-cell is-link @click="show=true">展示弹出层</van-cell>
    <van-popup v-model="show">内容</van-popup>tip：
1、如果用全局引入的方式，不要修改 .babelrc 或 babel.config.js 文件，会造成报错
2、.babelrc 文件可以放在src目录下也可以放在根目录下，修改即生效；babel.config.js 文件是配置文件，需要重启服务
3、按需引入时 .babelrc 或 babel.config.js 文件修改任意一个即可


文档来源：51CTO技术博客https://blog.51cto.com/u_15301829/3068378

查看完整版本: vant全局引入和按需加载