Vue.js Tutorial #2 Installation and Setup Vue.js

Prepared By:

First of all, go to the Google Chrome Web Store. Search for Vue DevTools. Choose the extension and click on 'Add to Chrome'. Now the extension installed successfully.

Install using CDN:

Here you can see the console log from Vue alerting we are using development version. Let's try to use minified and the production version of CDN. Yes, the alert has gone, now we are running on the production version.

Let's check how to use the ES module to install Vue. Here is the ES module version. Copying the URL. Creating a script tag with type as module. Import Vue from the URL. Console Vue version. Let's check the browser console. Yes, it's installed.

Install using NPM:
NPM is a recommended method for large scale applications. Because it pairs bundlers such as Parcel, Webpack, and Browserify. You can let the compiler know how to create production builds by setting 'NODE_ENV' environment variable to 'production' while building.

Install using CLI:

We can install Vue CLI with NPM. Now we can create a project with 'vue create' command. We don't have to customize the scaffold now so choosing the default option. Now the app is created. We can change the directory to the project root and serve it. The app is served on port 8080. We can try to open it in a browser window. Here we go, the default sample view is rendered successfully.

Install using Bower:

[shoonya]

what font are you using in your code editor ?