Vue.js - Development Machine Setup
- Estimated read time: 6 min read
- Written by Chad Campbell on Aug 11th 2017
Hey there, I'm Chad Campbell from Ecofic. I'm also the author of the Vue.js: Getting Started training course, which you can learn about here. One of the questions that I get asked is "How do you setup your dev environment?" or "How do you setup your local development machine with Vue.js?". In this video, I'm going to show you how I setup my machine for development with Vue.js. But first, if you're new to this channel, please consider subscribing now. The purpose of this channel is to help you create better software and get that software, to more people. One way to do that is with a solid Vue.js development setup.
To setup my environment, there are four tools that I like to use. Those four tools are: the Vue command line interface, a Visual Studio Code extension called Vetur, and two browser extensions: the Vue.js devtools extension and the DejaVue extension. Please realize that Vue.js is a progressive UI framework. For that reason, these four tools are really just a start. As your app needs grow, you'll likely want to bring in additional tools, libraries, or other things to help with your development. The tools shown in this video are tools that I've found myself using across Vue.js projects. Without further ado, I'd like to show you how to install each of these tools.
Install the Vue Command Line Interface
The Vue Command Line Interface, which is often known as the vue-cli, provides scaffolding. This is a way to quickly get up and going with a brand new Vue.js app. To install the vue-cli, I'm going to open a command-line window so you can follow along with me. I'm assuming that you already have Node.js installed on your machine. When you install Node, NPM also gets installed. You can confirm that NPM is installed by running "npm -v" from the command line. If it's not installed, please pause this video, install Node, and come back to it.
With NPM, you can install the vue-cli from the command line. Just type "npm install vue-cli -g" to globally install The Vue command line interface on your machine. Once installed, you can enter "vue list" to verify that the vue-cli was installed. If it was successfully installed, you'll see a list of the available official templates for starting a project with Vue.js. Now, actually starting a project is beyond the scope of this video. But, I would like to show you another tool that I like to use.
Install the Visual Studio Code Extension
My preferred code editor at this time is Visual Studio Code. I find that it meets my needs in most cases. In the context of creating apps with Vue.js, I recommend installing an extension called "Vetur". This extension provides auto-completion, debugging, error-checking, linting, snippets, syntax-highlighting, and much more.
To install Vetur, first open Visual Studio Code.
With Visual Studio Code open, I'm going to click the extensions option. Then, I'll do a search for Vetur using this search field. I can then install it by clicking the install button here. If you prefer to keep your hands on the keyboard, you can click Ctrl+P in Windows, or Command+P on Mac to launch the VS Code Quick open. Once there, you can enter "ext install vetur".
With the command-line tools and Visual Studio code extension in place, I can start a Vue.js project and edit the code efficiently. However, to efficiently debug my Vue.js app, I need to install some browser extensions.
Install the Browser Extensions
There are two browser extensions that I like to use when developing with Vue.js. Those two extensions are called Vue.js devtools and DejaVue. There are links to both of these extensions in the transcript associated with this video. You can jump to that transcript here. I'm going to show you how to install both of these extensions. The reason that I'm going to do this is so that if you're following along, you'll know exactly what they'll look like when you're searching for them.
Installing the Vue.js Devtools Extension
The first extension I like to install is the Vue.js Devtools extension. This browser extension is maintained by the official Vue.js team. At the time this video was made, there was a Google Chrome extension and a Firefox addon. Since I prefer Google Chrome at this time, I'm going to open Chrome and install the extension from there.
I'm just going to click the "more" button up here and click "More tools". In here is a sub-menu which includes the "Extensions" menu item. When clicked, I'm presented with all of the extensions that I've already installed. If I scroll down to the bottom, I have the option to choose to "Get More Extensions". When I click that link, I'm taken to the Chrome Web Store, where I can do a search for "Vue.js".
Once the "Vue.js devtools" extension appears, I'll select "Add To Chrome" to install the extension. While I'm in the Chrome Web Store, I'm going to install one more extension.
Installing the DejaVue Extension
Another extension that I like to install is called "DejaVue". This browser extension is a third-party extension that only works on Google Chrome as of the time of this video. This extension provides some really cool features to help you visualize your Vue.js app. You'll get an interactive visual tree of your Vue.js app, a way to inspect components, and a way to inspect the visual tree over time as state changes. To see more of what it does, I encourage to watch the YouTube video that this team has put together which can be seen here. Either way, I'm going to install this extension by clicking "Add To Chrome".
These are the four tools I use to setup my dev environment for Vue.js at the time this video was recorded. If there are other tools you prefer, please share those in the comments below. The links for all of the tools mentioned in this video are in the transcript for this course. That transcript can be found here. Just make sure to use the relevant YouTube card on the side.
I hope this video helps you create some better software with Vue.js. If you'd like to learn more about Vue.js, or other ways to create better software, please check out some of the training courses I've created by visiting here. Finally, if this video was helpful, please click the "thumbs up" below and share this video with others. This lets me know that I'm adding value to your day. For future videos, don't forget to subscribe!
Thanks for watching and have a great day.