Getting Started with Vue: What Is Vue and How to Install It

1. What Is Vue

Vue (pronounced /vjuː/, like “view”) is a progressive framework for building user interfaces. Its core library focuses only on the view layer, making it easy to learn and integrate with third‑party libraries or existing projects. When combined with modern toolchains, Vue can also power complex single‑page applications.

Key characteristics of Vue include:

Reactive data binding : Vue’s dependency‑tracking system automatically updates the DOM when data changes, freeing developers from manual DOM manipulation.

Component‑based development : UI is split into independent components that manage their own state and behavior, improving code clarity, reusability, and maintainability.

Simple template syntax : Vue templates support interpolation, directives, and event handlers directly in HTML, making rendering logic intuitive.

Virtual DOM : Vue builds an in‑memory virtual DOM tree and patches only the differences to the real DOM, reducing rendering overhead.

Routing and state management : Official plugins Vue Router and Vuex provide SPA routing and centralized state management, respectively.

2. Installation

2.1 Direct script inclusion

Download the Vue.js file and include it with a <script> tag; Vue becomes a global variable.

<script type="text/javascript" src="../js/vue.js"></script>

Alternatively, use a CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

2.2 NPM

For larger applications, install via NPM to work with bundlers like webpack or Browserify.

# latest stable version
npm install vue@^2

Vue also provides an official CLI that scaffolds a full SPA with hot‑reloading, linting, and production builds. npm install -g @vue/cli Create a new project: vue create 01-vue-demo The command generates a directory 01-vue-demo containing the project skeleton and installs Vue and its dependencies.