The problem of Intellisense failure of (VS Code) Vetur in a single file component

= Please refer to the adopted answer and the following comments for the solution =

has installed the Vetur plug-in to recognize the structure inside the .vue single file, but cannot use the properties and methods bound in the Vue instance.

for example, entering this in a function of methods in the .vue file does not recognize this as a Vue instance, thus prompting the relevant methods and properties of Vue (such as this.$router), but it is possible to introduce new Vue (). $route into the .vue file, that is to say, the problem of is not that the Vue instance is not recognized, but that the single-file component is not considered to be a Vue instance . Please refer to the picture below for details.

according to the experiment, I found that the official VeturPack example is normal, but the project generated by electron-vue is not normal, and the reason cannot be found because it is not clear how it works.

now the temporary conclusion is that Vetur should use some entry / method to find project files, but it doesn"t search correctly in my project. Is identified as an orphaned .vue file. So you need to figure out how it looks for project files.

if any god is free, you can copy the above two projects to study the reasons.

= Old problem description =

 Vue

vue checked that dependency is the latest version (> 2.5), vs code is also just updated. (2018-7-7)

looked around and didn"t find a plug-in to implement what I"m talking about, which makes it inconvenient to use the properties that are bound to the Vue component.

By the way, I generated the project using vue-cli "s electron-vue template.

at present, the best solution is to find a way that vue-helper, can be easily imported into Vue built-in, and then exported to the form of this.xxx. This makes it inconvenient for me if the variable name is self (= this), and I can"t recognize the attributes I bind to.

JetBrains (Webstorm) can be prompted. Although it feels as if it lists all the methods with the same name, rather than finding the associated Vue instance, whatever, at least gives me a hint


this effect?
ezgif-1-d8dec79e6a.gif

The

Vue2.5 version already comes with it. If not, the version is too old.

the picture quality inside the wall is poor. For the original picture, please go to the blog of the Evan (Vue developer) to find

.

official documentation: ide/typescript.html" rel=" nofollow noreferrer "> TypeScript supports

< hr >

add that it is not necessary to write TypeScript, but ts and js share language services. The js completion function of VSC is the same as that of ts. Because js does not have a syntax for declaring types, the completion function should be written in ts, but the declaration written by ts can also be used by js.

if you do nothing, you can only recognize the structure of a single file component. ide/typescript.html-sharp%E5%A2%9E%E5%BC%BA%E7%B1%BB%E5%9E%8B%E4%BB%A5%E9%85%8D%E5%90%88%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8" rel=" nofollow noreferrer "> official document says:

The
  

problem is solved. The plug-in only decides whether to enable this feature based on the version number of vue in package.json, not on the version of vue actually installed.
changing the vue version number is solved (^ 2.3.3-> ^ 2.5.3)
I initially read in package-lock.json that the version is up to date, and I thought it was fine, but in fact, no matter what you actually installed, it only looks at package.json.. It doesn't matter if the version you actually installed is > 2.5 and types is defined in it.
Please refer to the adopted answer for details, which contains a lot of useful information.

Menu