By Gary simon - May 26, 2017
This tutorial is a part of our free course React vs Angular vs Vue.js by Example. Check it out and join in from the beginning!
So, in this tutorial, we're going to cover all of the necessary steps to getting started.
Most tutorials at Coursetro feature a parallel video tutorial. Be sure to Subscribe to the Official Coursetro Youtube Channel.
You can use a Content Delivery Network, which allows you to use the HTML script tag to use Vue with your project. It's a quick and easy way to get up and running.
The recommended CDN to use is https://unpkg.com/vue, as it stays up to date the moment Vue is published to npm.
You simply copy the URL from the line above, and designate it as the src attribute of the HTML script tag:
This is added directly beneath the page's closing body tag.
For this course though, we're not going to use this method, as we're using Node.js.
You can use the Node Package Manager (NPM) to install Vue through the command line. This is ideal when you have a more robust project, or an exist projecting that you wish to integrate Vue with.
You must have Node.js installed with the NPM as well. To check whether or not you have these installed, at the console type:
> node -v > npm -v
Running each of these commands will provide you with a version number. If they go unrecognized, you need to visit Nodejs.org, install the suitable software for your OS, and then reload your command line. Retyping the above commands should yield a version number.
In the project folder through the command line, you install the Vue.js package by typing:
> npm install vue --save
This will install Vue within the node_modules folder of your project and add it as a dependency to the package.json file.
We won't use this method either for our project.
The Vue Command Line Interface (CLI) makes it quick and easy to start up a Vue project with basic scaffolding in place. It provides you with several options that you can also use, to setup routing and such.
This is the installation method that we're going to use for our course project. So, in the command line let's get started by installing the Vue CLI:
> npm install --global vue-cli
This will install the Vue CLI globally on the machine. The --global flag ensures you only have to install it once on your machine.
Once installed, you can access the Vue CLI by vue. To start a new project with the Vue CLI, type:
> vue init webpack compare-vue
When you press enter after typing this command, you will be presented with several prompts:
? Project name: compare-vue ? Project description: A Vue.js project ? Author: Gary Simon <firstname.lastname@example.org> ? Vue build: standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No vue-cli · Generated "compare-vue". To get started: cd compare-vue npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
Most of these questions are straightforward, but Vue build will give you 2 options, which I chose the standalone recommended version.
We also want to install the vue-router because, in our project, we intend to have a home page and a FAQ page.
I chose No on the next 3 questions because this is a quick project just to get our feet wet; we don't need to linting or code testing. If this were a serious project though, you would want to enable these options.
Next, we have to move into our new project folder and run npm to install the packages from package.json:
> cd compare-vue > npm install
Once finished, you're ready to go! You can now run another command to run your project, which will show up live in your browser. It will also automatically rebuild and reload your browser upon certain file changes while you develop:
> npm run dev
Our new Vue.js project is now located at http://localhost:8080.