VUE脚手架引入vantUI组件

vue 脚手架如何引入VANT UI组件##

使用npm安装vant ui组件

记住这里要在脚手架所在文件夹的地址输入cmd，弹出的命令窗口安装

npm i unplugin-vue-components -D

在 vue.config.js 文件中配置插件：

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

接下来就可以引入组件了

局部引入vantUI组件

import { createApp } from 'vue';
//这里书写你需要的组件名
import { Button } from 'vant';

const app = createApp();
//引入组件
app.use(Button);

全局引入vantUI组件

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Vant);