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
- Visual Studio Code Extensions for VueJS
- Google Chrome VueJS Dev Tools
- Vue CLI
For you to successfully complete this lesson, you should have the following requirements
- NodeJS - if you need to work with Vue CLI then you need to have node in your development machine.
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.
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
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
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.