zoukankan      html  css  js  c++  java
  • vant全局引入和按需加载

    1、下载vant

    npm i vant -S

    2、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 -D

    2、在 .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 文件修改任意一个即可

  • 相关阅读:
    linux 学习之七-部分ssh命令
    揭秘淘宝286亿海量图片存储与处理架构
    大型网站后台架构的演变
    Linux学习之六-Yum命令的使用
    res://ieframe.dll/acr_error.htm 纯手动解决方法
    VS2013启动项目调试的时候会启动本地IIS
    linux学习之(六)-主机名、网络IP的配置与查看
    deployment.yaml 带同步时区
    Deployment
    mysql.yaml
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14867993.html
Copyright © 2011-2022 走看看