Vue.JS with Visual Studio Code — Getting Started
Hello and welcome to this tutorial on Vue.JS with Visual Studio Code. In this series of tutorials, we will see how we can work with Vue.JS with VS Code and learn more about Vue.JS.
Note: Live demo video down below.
What is Vue.JS
Its a front end JS library like Angular or React. It is getting very popular lately with a huge amount of support and plugins that can be used along with it.
Like Angular or React, it has component model system, routing, state management and many other features you want to find in a UI framework. But, it’s main advantage it does not come shipped with all the libraries in the framework instead you select what you need to use. For instance if you need state management you will need to install the vuex package. Same for routing. so this actually make it smaller in size.
Vue.JS vs other libraries
Okay for sure you want to make sure that you are using a high speed UI framework and does not have problems in performance. Here are some comparison between Vue.JS performance vs other libraries from the official guide.
Let’s Get Started! Now, make sure that you have VS Code up and running. Go to VS Code and select which folder will hold your Vue.JS folder. After that you will notice your folder selected on the side.
Now, let’s ope the integrated terminal so we can call the npm to get Vue.JS. You can open the integrated terminal from the View menu or use (Ctrl+`) shortcut. Make sure you see the name of your folder in the terminal:
Now, we can install Vue.JS directly but we want to use a template that can help us cut time and use some ready made features. So we are going to follow these steps from the Vue.JS Template Project:
npm install -g vue-cli
vue init webpack my-project //Replace "my-project" with your project name. When you run this command it will ask for some project info like name and description. Also, select the recommend settings "Runtime + Compiler". Also select to install vue-router. It's up to you to use ESLint but this tutorial will skip it. Also, we will install the unit test plus e2e cd my-project
npm install //The installation process can take some time
npm run dev //This command will run your project.
And if everything goes smoothly, you will have Vue.JS up and running like this:
Now let’s check out the project folder:
Most of the time, you will be working with the “src” folder. in the “src” folder all your Vue.JS app folders for components and parts will be. By default, you will have the Hello component as your index page. So let’s expand the components folder and open the Hello.vue component. Notice that every component ends with .vue extension.
Notice something that is missing? Where is the coloring for the HTML part and JS code? since this is a .vue file VS code does not recognize it (Maybe in the future it will!) So let’s head over to the extensions and add some Vue.JS extensions to help us out.
Let’s install Vetur (If you have a recent edition of VS Code, it will recommend out this extension and other extension for Vue.JS by default):
Now we have a much better looking code!
Now, lets play around with our component. Make sure you have the app running (Remember “npm run dev”). Now, let’s introduce a new varaible in the data and name it employee. Just place a string value in it.
<script>export default {name: 'hello',data() {return {msg: 'Welcome to Your Vue.js App',employee: 'David James' //our new variable}}}</script>
And just add an h2 on the top as follow:
<h2>{{ employee }}</h2>Notice that we have Hot Reload enabled. So directly the value will be reflected on the UI.
live demo:
This is the first part of this tutorial series that we will continue to work with Vue.JS along with VS Code. So stay tuned!
Also, please follow TutorialsXL on medium so you receive updates from our publication. Thanks for reading along, please Recommend this article to share knowledge.
Online training made simple by TutorialsXL.com. Join now and receive great online courses.
Windows IoT Core Development Course
https://tutorialsxl.com/courses/windows-iot-development/
