关于vue3+ts+element-plus项目的初次踩坑

描述

搭建一个vue3,ts,element-plus项目时，总有一些莫名其妙的问题。

脚手架：@vuecli 4.5

• 搭建脚手架项目时，选用了按需导入(vue-cli-plugin-element-plus)

• 脚手架通过别名引入的包会有红色波浪线提示，但是能运行，提示找不到

探索一番后发现一些问题

我用的时vue ui 搭建的项目

项目创建完成之后，elemen文件：

src/plugins/element.js这个文件是选择了按需导入，之后脚手架自动创建的。

import { ElButton } from 'element-plus'

import lang from 'element-plus/lib/locale/lang/zh-cn'

import locale from 'element-plus/lib/locale'

export default (app) => {

  locale.use(lang)

  app.use(ElButton)

}

脚手架在main.ts中引入的这个文件会报错，这时候我纳闷的是，既然是脚手架搭建的项目，初次启动项目应该没有问题，但是事与愿违，一堆警告,还无从下手，于是跟着网上的资料，把文件后缀名改成了ts,貌似参数app这个地方行不通，于是又加了个类型限制app: any,是能通了但是，控制台有许多警告信息，揪心。，这只是坑一

import installElementPlus from './plugins/element'

// 这里会报类型错误 any

坑二

红色波浪线警告

import HelloWorld from '@/components/HelloWorld.vue'

// 这里的引入会红色波浪线警告，..not found module..

但是脚手架本身已经配置好了路径别名

tsconfig.json

"paths": {

      "@/*": [

        "src/*"

      ]

    },

最后发现问题源自于一个地方：vetur插件对vue3,ts的支持并不友好

Volar-插件

Language support for Vue 3
我在vscode中安装了这个插件：据说是vue的新一代插件，集成了vetur的相关功能，如高亮、语法提示等

如果君非大牛，希望对你所帮助