vue3引入VANT总是报错

使用VUE3后,引入VANT总是没搞定,求帮助

本地安装完VUE3后,进入项目文件夹安装VANT
npm install --save vant
然后安装 babel-plugin-import 插件,也修改了babelrc 中配置。
整个安装流程都是按照这里进行的
https://blog.csdn.net/mossbao...

但是就是后来在引入button的时候,出现错误

app.vue代码如下:

<template>
  ![](./assets/logo.png)
  <HelloWorld msg="Welcome to Your Vue.js App"/>
      <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import {Button} from 'vant';

export default {
  name: 'App',
  components: {
    HelloWorld,
    [Button.name]:Button
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

image.png

阅读 6.9k
2 个回答

意思是,禁止使用空格和tab的混合缩进,你4、5、6、7行使用了空格和tab的混合缩进,所以lint报了这个错误。
解决方案:
1、建议你只使用一种缩进方式(空格和tab二选一,不要混合用)。
2、关闭eslint对混合缩进的检查:根目录下,配置文件.eslintrc.js或者packages.json中,rules添加一行"no-mixed-spaces-and-tabs":"off",然后重启服务npm run serve,这样子就关闭了,对tab和空格混合缩进的检查。

image.png

"export 'default' (imported as 'Vue') was not found in 'vue' 错误

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题