发现 & 解决过程
最近闲来无事想玩下 vue3,一通命令之后就创建完了
sh
$ vue create test-vue3
## 一系列选项...
$ npm i -S element-plus
## 编写引用代码...
然而在我正式开始写代码时 我发现一个很严重的问题,vscode的智能提示里居然没有element-plus的组件。
为了确认不是EP不支持智能提示,我还装了个ant-design-vue的v2版本,果然结果一样,没有提示。
这种基础提示都没有我还怎么愉快的写代码,必须解决才行。
于是我打开了vetur插件的ReadMe页面,发现里面有个Docs链接,我就进去了。
看了下目录,发现有个 Component Data,点进去一看就是关于组件索引的信息。
让我惊奇的是vetur插件中居然内置了一部分框架的组件索引
如果我没理解错 或者 文档没写错的话,应该就是如此了。
本人英语水平不好,如有误,请发邮件联系我删除此段文本
好在他还提供了个手动提供索引的方法,下面开始正文
解决方案
首先在项目内创建两个文件 tags.json
和 attributes.json
,至于在什么位置建随便你,因为之后还要提供个路径的
tags.json
json
{ "foo-bar": { "description": "A foo tag", "attributes": ["foo-attr"] } }
attributes.json
json
{ "foo-bar/foo-attr": { "description": "description of foo-attr" } }
然后打开 Package.json 插入如下代码
json
"vetur": {
"tags": "./tags.json",
"attributes": "./attributes.json"
}
ok,完事儿,可以开始愉快的写代码了。
对了,顺便放上一个我刚从官方组件索引项目基础上改进的组件索引文件。
https://github.com/kljzndx/element-helper-json