Digital-Q

Implements Business Expectations

Howto Install Vuejs

by 1 Comment

Installing Vue through a CDN

The easiest and quickest way of installing Vue is by directly including Vue via a CDN (Content Delivery Network) in a <script> tag. This means that instead of Vue residing on your own server, it will be delivered from a separate server. Technically, you aren’t installing Vue in this scenario, as you’re simply creating a reference of Vue.

If you’re interested in using this method, open up your command line or console and create a new folder:

> mkdir vue-cdn && cd vue-cdn

Open up your code editor and create an index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue CDN</title>
</head>
<body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>
</html>

If you view this index.html file in a browser and view the console (ctrl-shift-i in Chrome), you will see the message:

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:8436 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

This means that Vue has been integrated and you’re ready to rock. To prove this, we can create a very simple Vue app.

Go back to the index.html and update it to match the following within the body tags:

<body>

    <div id="app">
        {{ message }}
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
        
    </script>
</body>

Refresh the browser and you will see Hello Vue!, which means Vue is working.

Throughout this course and our project, however, we are not going to use this method. Feel free to delete the /vue-cdn folder you just created.

Install Vue through NPM

NPM (Node Package Manager) is used to install packages. You can use it to install Vue within either a new or existing project.

You will need to ensure you have Node.js installed along with access to NPM. To check, open up your console and type:

> node -v

> npm -v

Both of these commands should provide you with version numbers. If they go unrecognized, visit Nodejs.org and download the appropriate installer based on your operating system. Install it through the default options and reload your console. You can now re-issue the same commands and they will work.

First, we have to create a new project folder:

> mkdir vue-npm && cd vue-npm

In order to save our project dependencies based on what we install with NPM, we need to create a package.json file.

To do that, issue the following command:

> npm init -y

This will create a new package.json file and enter the defaults -y for the prompts.

Next, we will use npm to install vue:

> npm install vue --save

At this point, you could create an index.html file with the same exact contents as the CDN example above, except change the <script .. src to node_modules/vue/dist/vue.js, and it will work just the same.

Typically, however, you would use something like Webpack or Gulp as a more robust development environment.

Because our project is not going to be set up in this fashion, we’re going to use the Vue CLI method as the actual method that we use to install Vue.

Installing Vue with the Vue CLI

The Vue CLI (Command Line Interface) is a quick, easy and robust way to get started with a brand new Vue project.

You first need to install the Vue CLI:

> npm install -g @vue/cli

Also, you will need to make sure Node is up to date. By the way: You can also use Yarn to install Vue.

Next, we can use it to start a new Vue project:

> vue create vue-proj

This will provide you with the following prompt:

Vue CLI v3.0.0-alpha.8
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

To keep things simple, we’ll leave it at the default option and hit enter.

  • babel is a JavaScript compiler.
  • eslint is a JavaScript linter. Linting flags coding errors, bugs, etc..

After it’s finished installing, you can hop into the directory and then serve the Vue app:

> cd vue-proj
> yarn serve

Then, the project will become accessible at http://localhost:8080/ in your browser!