Contact Information

KodeBlog

We're Available 24/ 7. Drop us an email.

VueJS Development Environment

Techinically you can write your code in a regular text editor like Notepad and your Vue application will run just fine. But we need to be very productive and reduce errors in our code. This lesson will show you the tools that you need to successfuly and productively develop applications.

Topics to be covered

We will cover the following topics in this lesson

Lesson Prerequisites

For you to successfully complete this lesson, you should have the following requirements

Visual Studio Code Extensions for VueJS

This section assumeS that you have already installed Visual Studio Code. If you haven't yet installed it, then you can download it and check our guide on installing VS Code.

Once you have installed Visual Studio Code, you can use Vetur extension to provide features such as syntax highligting, snippets, formatting, auto complete etc.

You can also work with any code editor that you are comfortable with.

Google Chrome VueJS Dev Tools

We will be working with google chrome as the web browser. In this section, we will look at an extension for Chrome that gives us debugging capabilities from the web browser. The name of the tool is Vue.js devtools. It was created by the same team that created Vue and its available for both Chrome and Firefox.

You can search for it on Google using the term Vue.js devtools

Add it as an extension. You should be able to see in Chrome as shown in the image below

{{image placeholder}}

Vue CLI

This is a command line utility that allows you to easily create Vue JS applictaions from the command line. You need to install Node so that you can get NPM. NPM is a package manager for NodeJS. Alternatively you can use yarn to install it.

The following command is used to install Vue CLI globally using NPM

npm install -g @vue/cli

Once you have successfully installed Vue CLI, you can use the command below to create a Vue project

vue create my-project

Summary

Visual Studio Code is a great code editor that supports Vue JS. You can install extensions such as Vetur to provide additional functionality that is meant for VueJS specifically. All you need is a code editor, a web browser with a few extensions and you are good to go.

Author: Rodrick Kazembe

Rodrick is a developer who works on Desktop, Web and Mobile Applications. He is familiar with Python, Java, JavaScript, C++, C#, Kotlin, PHP, Python and the list goes on. Rodrick enjoys sharing knowledge especially when it comes to technology.

Vue JS Components

Leave A Reply