vuejs
  1. vuejs-ways-of-using-vue
PreviousNext

VueJS - Ways of Using Vue

VueJS is a progressive JavaScript Framework used to build user interfaces. There are multiple ways of using Vue, which include:

1. CDN

One of the easiest ways to get started with Vue is by downloading it through Content Delivery Network (CDN). It’s the most common way of using Vue for small-sized projects. You don’t even need to install it, just a few lines of code before the end of the body are enough.

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Vue!</title>
   </head>
   <body>
      <div id="app">
         {{ greeting }}
      </div>
      <!-- Vue.js CDN -->
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      <!-- Vue script -->
      <script>
         var app = new Vue({
            el: "#app",
            data: {
               greeting: "Hello Vue!"
            }
         });
      </script>
   </body>
</html>

2. NPM

For medium to large-sized projects, it is recommended to use Node Package Manager (NPM) to install Vue. This approach provides the flexibility to use modern development tools like webpack.

To install Vue using NPM, use the following command in the terminal of your project directory:

npm install vue

After installing Vue, you can import it in your project file.

import Vue from 'vue'

var app = new Vue({
   el: "#app",
   data: {
      greeting: "Hello Vue!"
   }
});

3. Vue Cli

Vue command-line interface (CLI) is a full system for rapid Vue.js development. The Vue CLI provides a standard project structure, build tooling, and the ability to configure various aspects of your Vue.js app with a simple config file. You can install it globally using the following command:

npm install -g @vue/cli

To get started with Vue CLI, use the following commands:

vue create app-name
cd app-name
npm run serve

Vue CLI generates a new project and installs all the necessary dependencies. We can start our project using npm run serve command.

Important Points

  • For small-sized projects, CDNs can be used for quick start with VueJS.
  • For medium to large-sized projects, it is recommended to use NPM to manage VueJS dependencies.
  • The Vue CLI includes essential development tools such as webpack, babel, and hot module replacement, making it ideal for large projects.
  • The Vue CLI provides a standard project structure, making it easier to build scalable applications.

Summary

Numerous ways of using VueJS are available to developers, the most common of which are CDNs, NPM and Vue CLI. The developer can choose one of these based upon the project size and other requirements. Each of them has its own advantages and disadvantages, but all of them enable the developer to create a powerful and interactive front-end web application.

SecurityReactivity in Depth
Published on: