Detailed explanation of Vue syntax usage in webstorm

This time I will bring you a detailed explanation of the use of vue syntax in webstorm. What are the precautions for using vue syntax in webstorm. Here are practical cases, let’s take a look.

As the saying goes, if you want to attack jade, you must first sharpen your weapon. I always use angular for development at work, but gradually there will be Vue business, so I need to learn Vue. I started playing around with vue today. I used webstorm to develop the front-end. After using vue-cli to create a project, it was impossible to open it using webstorm. There was no error message, but a lot of edit Device warning, I have no choice but to improve the IDE's support for vue.

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 have installed node and npm.

Install vue-cli globally

Run the command in the terminal:

npm install --global vue-cli

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

vue init webpack my-project

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

npm run dev

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 webstorm https://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 during the previous operation):

preferences > editor > file types

Pull down to 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 the progress under webstorm After the is filled, 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 for JavaScript. 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!

Recommended reading:

js regular related use case sharing

detailed explanation of node Async/Await asynchronous programming implementation

The above is the detailed content of Detailed explanation of Vue syntax usage in webstorm. For more information, please follow other related articles on the PHP Chinese website!