Detailed explanation of vue use cases in webstorm-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the use cases of vue in webstorm. What are theprecautionsfor using vue in webstorm. The following is a practical case, let's take a look.

Premise

The official documentation of vue recommends that novices should not use vue-cli first, but directly introduce vue to learn in the same way as JQuery. Since I have already dealt with angular's cli before, I will start directly with the cli.

Assume that we haveinstallednode and npm.

Install vue-cli globally

Run the command in the terminal:

npm install --global vue-cli

Copy after login

Install vue-cli globally. Then use vue-cli to create our project:

vue init webpack my-project

Copy after login

In this way we will have a complete project, and there will be a sample component in it. Run:

npm run dev

Copy after login

and access it in the browser You can see the running status of the project at http://localhost:8081/.

Tossing webstorm

When I opened the vue project in webstorm, I almost wanted to give up on vue. I really couldn’t bear to look at it, but I still have to carry forward my consistent spirit of exploration. If you encounter a problem, solve it!

.vue type files

First we have to start with the file type. In the current version, there is no .vue file type, so it cannot be recognized. It cannot be highlighted, and even if it is recognized, it will be messy. After checking, some said that adding *.vue to the file type would be enough, but if I added it, it would become even more confusing.

After searching Google for a long time, I found this article, which is from the official website of webstormhttps://www.jetbrains.com/help/webstorm/vue-js.html. Webstorm already supports Vue, but I can't find this option at all in my local webstorm. Why is this?

After checking it, I found that the version of webstorm is the 2018 version, and my webstorm is 2017.2. So I need to update to the latest version.

Yes, back up the webstorm settings, then download the latest webstorm and update. By the way, I found an activation code: http://hb5.s.osidea.cc:1017 (it’s hot and can be used for personal testing).

Sure enough, after installation, I found the vue mark, and indeed the new version is supported.

But I found that the highlighting of the .vue file is still not available. It seems that I still need to add file support (I don’t know if I deleted it during the previous operation):

preferences > editor > file types

Pull it down Select vue.js templates, click and then click the plus sign in the registered patterns below, then enter *.vue, then click OK, click apply, and then you can see aprogress barunder webstorm, go After it is full, the highlighting of .vue will be normal.

unused export default

There is an export default in the js in the vue component. There is a gray reminder above. When you move the mouse up, you will find the prompt unused export default. This is because there is no specific use of this export, it is a syntax hint forJavaScript. We can configure it in the configure inspection configuration of the IDE.

The quick way is: click on the little head in the lower right corner 》configure inspection. In the pop-up interface, select: JavaScript 》 General. Remove option: unused global symbol. Then click OK and you can see that the gray reminder disappears.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!