（VS Code）Vetur 在單文件組件內(nèi) Intellisense 失效的問(wèn)題

=== 解決方法請(qǐng)參考采納的答案和后面的評(píng)論 ===

已經(jīng)安裝了 Vetur 插件，可以識(shí)別 .vue 單文件內(nèi)部的結(jié)構(gòu)，但不能使用 Vue 實(shí)例中綁定的屬性和方法。

例如，在 .vue 文件的 methods 某個(gè)函數(shù)內(nèi)輸入 this 不能將 this 識(shí)別為 Vue 實(shí)例，從而提示 Vue 的相關(guān)方法和屬性(例如 this.$router），但如果在 .vue 文件內(nèi)引入 new Vue().$route 是可以的，也就是說(shuō)問(wèn)題不在于無(wú)法識(shí)別 Vue 實(shí)例，而是該單文件組件沒(méi)有被認(rèn)為是一個(gè) Vue 實(shí)例。詳情請(qǐng)參考下方圖片。

根據(jù)試驗(yàn)，我發(fā)現(xiàn)官方給的 VeturPack 例子是正常的，但是通過(guò) electron-vue 生成的項(xiàng)目就不正常，由于不清楚它的工作方式，因此沒(méi)找出原因。

現(xiàn)在暫時(shí)的結(jié)論是，Vetur 應(yīng)該使用某個(gè)入口/某種方法來(lái)查找項(xiàng)目文件，而在我的項(xiàng)目里它沒(méi)有正確的搜索…被識(shí)別為一個(gè)孤立的 .vue 文件。所以得弄清楚它是怎么查找項(xiàng)目文件的。

如果有哪位大神有空的話，可以幫忙復(fù)制上面兩個(gè)項(xiàng)目研究一下原因。

===== 舊的問(wèn)題描述 =====

可以獲取文件內(nèi)的結(jié)構(gòu)

無(wú)法獲取 Vue 實(shí)例的屬性

vue 查看了 dependency 是最新版的（> 2.5)，vs code 也是剛更新的。（2018-7-7）

找了一圈沒(méi)有發(fā)現(xiàn)有插件實(shí)現(xiàn)我所說(shuō)的這個(gè)功能，這樣很不方便使用綁定到 Vue 組件的那些屬性。

By the way，我是用 vue-cli 的 electron-vue 模版生成的項(xiàng)目。

目前最好的解決辦法是發(fā)現(xiàn)了一個(gè) vue-helper，可以便捷輸入 Vue 內(nèi)建的方法，然后輸出成 this.xxx 的形式。這樣我如果變量名是 self (=this) 就很不便，而且自己綁定上去的屬性也沒(méi)法識(shí)別。

JetBrains 系(Webstorm啥的) 是可以提示的，雖然感覺(jué)它好像是把所有同名的方法都列了出來(lái)，而不是找到了關(guān)聯(lián)的 Vue 實(shí)例，但 whatever，至少給了我提示

回答

編輯回答

幼梔

這種效果？

Vue2.5版本已經(jīng)自帶了。如果沒(méi)有，說(shuō)明版本太老。

墻內(nèi)畫(huà)質(zhì)比較渣，原圖請(qǐng)到Evan（Vue開(kāi)發(fā)者）的博客原文里去找

官方文檔：TypeScript 支持

補(bǔ)充一下，不一定要寫(xiě)TypeScript，只不過(guò)ts和js是共享語(yǔ)言服務(wù)的，VSC的js補(bǔ)全功能就是ts的那一套，因?yàn)閖s沒(méi)有聲明類(lèi)型的語(yǔ)法，所以補(bǔ)全功能要用ts寫(xiě)，但ts寫(xiě)好的聲明一樣可以給js用。

如果什么都不做，確實(shí)是只能識(shí)別出單文件組件的結(jié)構(gòu)。官方文檔里是這樣寫(xiě)的：

// 1. 確保在聲明補(bǔ)充的類(lèi)型之前導(dǎo)入 'vue'
import Vue from 'vue'

// 2. 定制一個(gè)文件，設(shè)置你想要補(bǔ)充的類(lèi)型
//    在 types/vue.d.ts 里 Vue 有構(gòu)造函數(shù)類(lèi)型
declare module 'vue/types/vue' {
// 3. 聲明為 Vue 補(bǔ)充的東西
  interface Vue {
    $myProperty: string
  }
}

然后保存為xxx.d.ts，整個(gè)項(xiàng)目?jī)?nèi)的.ts和.js就都會(huì)得到這個(gè)聲明

上圖用的就是js，類(lèi)型推斷也是正確的。

再補(bǔ)充一下，既然是vue-cli的話，新建項(xiàng)目的cli選項(xiàng)里會(huì)有TS支持的選項(xiàng)，打開(kāi)的話會(huì)自動(dòng)生成一個(gè)模板.d.ts，可以參考著用。

還有就是，既然都用箭頭函數(shù)了，還self = this干啥？

2017年1月23日 04:11

編輯回答

懷中人

問(wèn)題解決了，插件僅僅是根據(jù) package.json 里 vue 的版本號(hào)決定是否開(kāi)啟這項(xiàng)功能的，而不是根據(jù)實(shí)際安裝的 vue 的版本…
將 vue 版本號(hào)更改就解決了 (^2.3.3 -> ^2.5.3)
我最初在 package-lock.json 里看了版本是最新的，就認(rèn)為沒(méi)問(wèn)題，但實(shí)際上它不管你實(shí)際安裝的是什么，它只看 package.json...就算你實(shí)際安裝的版本 > 2.5 而且里面定義了 types 它也是不管的。。。
具體細(xì)節(jié)請(qǐng)參考采納的答案，里面提到了很多有用的信息。

2017年8月14日 18:08