#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Enabling the Vue.js Plugin in PyCharm and WebStorm
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well we got our Vue.js app up and working. Remember it was working really well right here. However we look at this in our editor and
0:08
it looks kind of broken right? Like it says oh this thing is totally busted this view model is not HTML we don't know what this is.
0:14
So, we can fix this if we go either we have WebStorm and it automatically comes with Vue.js support.
0:20
Or we have PyCharm, and if we go to the plugins section. We search for Vue, over here. You can install this into PyCharm.
0:28
And then you have the same behavior, okay? However one of the caveat of making that work super annoying to me, its not enough to include Vue.js.
0:35
The way it works is it kind of treats it as a npm package. And only then will it turn on Vue.js support. So in order to get auto complete
0:44
in Pycharm or WebStorm doesn't necessarily mean other tooling, like for example Visual Studio Code or something, need this.
0:51
But for us right now to get auto complete here which is really vaulable. We have to go over and basically convert this folder here.
1:00
This folder right there, into a Node.js package. How do we do that? Well if you have a node installed you type npm init
1:06
and it asks you a bunch of questions you don't care what the answers are because you're not going to publish this, right.
1:12
However what that does is that generates a package.json and from there we can say npm install -s vue. And we do that and we wait a moment.
1:23
Its installed, and now we should see over here we have Vue and actually here's the distributed bits an all.
1:28
So, we're not technically using that version although maybe we could switch to it. Might make sense, but something
1:34
really cool happened when we did this. Look up here now. This warning went away but this turned purple. Why did it turn purple?
1:41
Well if I Command + Click on it, watch this. It knows its a property which is a string defined inside js And in fact, it takes you right to it.
1:50
It understands how this all fits together. So we also get, if we come over and we type v. Look at that, v-. Here are all of your Vue.js attribute
1:58
commands that you can use. So we're going to do this, we're going to turn this into a Node.js package, or a npm package.
2:04
Just so that we can get this plugin in to help us because it's so worth it when you're doing Vue.js. But we don't really want this to be
2:10
an actual package, right? Anyway, there it is. I think this was really a step worthwhile in the JetBrains tools to make that plugin work.
2:19
Your editor, if using something else may require some other steps to make it work.