Vue.js comes with a built in command line tool called
Vue CLI, which makes setting up a new Vue.js project a breeze. Vue.js can be used without this, but the advantage of using
Vue CLI is that it sets up a Vue.js project using Babel and Webpack and allows the project to be launched easily in a web browser via an npm command.
Before running the VUE CLI command, we need to make sure we have NPM installed on our machine first. This can be done with the command
Now that we confirmed we have npm already installed, we next need to install VUE CLI from a command prompt. At the command prompt, use the command
npm install -g @vue/cli.
If there are errors related to JSON, check the folder location for existing package.json or package-lock.json files. These should be removed OR try running the command in a different folder. Note: you can ignore all of the deprecated messages and there is no need to independently install the deprecated modules.
Here is what the output in the command prompt may look like.
Once this step is complete, you can check the version of Vue.js with this command:
Now that we know Vue CLI is installed, we can easily create a new Vue.js project at the command line. For example, let’s say we wanted to create a new project called “video-browser”. cd to the folder you want to create this project in and run the command
vue create -n video-browser
-n here means start the project without git. Here is what the output looks like:
You should see the text that says “Successfully created project video-browser.
Next cd into that new folder. Then run the command
npm run serve and this will launch a web service where you can see some default output for your new web project. For example:
As can be seen in the message, we can now view the default web page for our new Vue.js app in the browser at this location: http://localhost:8080
Now that the video-browser folder has been created, you can open it as a project in Atom or your favorite IDE. Notice all of the files and folder structure created for free. For example: