vue中UI组件库的使用（vant为例）

vant官网

使用：

        一、安装

                # Vue 2 项目，安装 Vant 2： npm i vant -S

                # Vue 3 项目，安装 Vant 3： npm i vant@next -S

        二、引入：

                1.全部引入（引入所有组件，不推荐，因为包会很大）

                2.按需引入（推荐）

                       2.1 安装插件 npm i babel-plugin-import -D      会生成一个 babel.config.js

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

                       2.2 对于使用 babel7 （新版）的用户，可以在 babel.config.js 中加入配置

module.exports = { plugins: [ [&＃39;import&＃39;, { libraryName: &＃39;vant&＃39;, libraryDirectory: &＃39;es&＃39;, style: true }, &＃39;vant&＃39;] ]
};

                 2.3，在vant网上找到想用的，在组件内引入相关，如：想在APP.vue中使用Button

                                APP.vue中：

                     2.4  然后就可以挑选合适的Button按钮和Checkbox复选按钮放到模板中了，例如：

                  2.5通过挑选并设置标签的属性，实现想要的效果。如案例中van-button标签的type属性，van-checkbox的shap属性，

                属性是可以动态绑定的,如     按钮,danger是template标签中data或者其他的数据

                        2.5.1 挑选，在各个vant组件的API中（页面往下拉能看到），

                                        API中：pros代表标签可添加或绑定的属性（控制样式）

                                                      Event代表标签可绑定的事件，当然了，要把事件执行方法写在methods中

                                                     。。。