vant-ui安装和使用(Vue2.0)

原创已于 2022-08-16 09:58:38 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

于 2022-08-11 14:23:57 首次发布

本文介绍了Vant UI在Vue 2.0项目的安装和使用，包括完整引入和按需引入的方式，并提供了Mint-UI的按需引入方法。在Vant的完整引入中，需在main.js中导入样式；按需引入时，需配置babel-plugin-import并指定在需要的地方引入组件。同时，由于Vant官网可能不稳定，推荐使用Vant中文教程作为参考。

完整引入方式

安装依赖包

yarn add vant -S

在main.js中引入依赖样式

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css'
Vue.use(vant)

按需引入方式

安装依赖包

yarn add vant -S
按需引入依赖包

yarn add babel-plugin-import -D

在babel.config.js里配置

plugins: [
    ['import', {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
    }, 'vant']
]

再main.js里引入

import { Button, NavBar } from 'vant';
Vue.use(Button).use(NavBar)

在需要的地方直接引入 vant组件库。

由于vant官网经常崩溃

所以代替网址

Vant 中文教程_w3cschool

mint-ui 按需引入方式

安装依赖插件

npm install babel-plugin-component -D
yarn add babel-plugin-component -D

然后，将 .babelrc 修改为：

{
    "presets": [
           ["es2015", { "modules": false }]
    ],
    "plugins": [
        ["component", [
          {
                "libraryName": "mint-ui",
                "style": true
          }                           
        ]]
    ]                                                                       
}