Vue如何引用Vant组件

勘察加熊人

于 2021-05-07 14:54:18 发布

阅读量426

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/cf8833/article/details/116493384

版权

Vue.js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中配置并使用Vant UI框架，包括通过npm安装 vant 和 babel-plugin-import，修改babel.config.js，导入Button组件，以及在main.js和App.vue中的设置。最后，通过npm run serve启动项目，验证配置成功。

摘要由CSDN通过智能技术生成

新的解决方案：

step1:

cnpm install vant --save-dev

step2:

cnpm install babel-plugin-import --save-dev

step3: babel.config.js 添加

module.exports = {

presets: ["@vue/cli-plugin-babel/preset"],

plugins: [['import', {

libraryName: 'vant',

libraryDirectory: 'es',

style: true

}, 'vant']]

};

step4: main.js 添加

import { Button } from 'vant'

Vue.use(Button)

step5: App.vue

<template>

<div>

<h1>关于</h1>

<van-button type="primary">主要按钮</van-button>

<van-button type="info">信息按钮</van-button>

<van-button type="default">默认按钮</van-button>

<van-button type="warning">警告按钮</van-button>

<van-button type="danger">危险按钮</van-button>

</div>

</template>

step6:

npm run serve

add：

全局新增 main.js

import Vue from "vue";
import App from "./App.vue";
import router from './router'
// main.js

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

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

it is work！

end