Getting started with vuejs2

Remarks#

Vue.js 2.X is a fast, lightweight framework for building user interfaces in Javascript. It is similar in many ways to Angular and React, and like those libraries can be used either to provide just the view layer (the V in MVC) for a larger application, or (in combination with other tools) to create fully-featured single-page web applications.

Vue takes a more minimal approach than Angular or React, however; it relies more on traditional web technologies (e.g. it allows JSX but encourages templating in HTML) and the use of outside libraries to complement its core functionalities. This gives it a faster learning curve than many other frameworks, and allows developers to continue using their preferred tools to accomplish tasks within Vue.

Web developers familiar with other front-end frameworks will find many familiar features in Vue, from a component-based paradigm and the virtual DOM to conditional rendering with directives such as v-if, v-show, and v-hide. These features are combined with innovations such as single-page templates and computed component properties.

Vue 2.X retains 90% of the API of 1.X, with the most significant changes involving renaming of component lifecycle hooks and the removal of support for fragment component instances. A migration helper is available for developers who want to upgrade from earlier versions of Vue.

“Hello, World!” Program

It’s similar to Vue.js version 1, version 2 can be directly embedded in a single html file.
To include Vue.js2 in html file, make sure you have the script file included in the HTML. For example, use the following HTML. It should display the Hello message correctly.

<div id="app">{{message}}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js2'
      }
    })
</script>

See a jsfiddle demo for this example.

Hello World: Getting started with vue-cli

Install vue-cli:
```
npm install -g vue-cli
```
start a project like:
```
 vue init <template> <project-name>
```
where <template>:
1. webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
2. webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
3. browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
4. browserify-simple - A simple Browserify + vueify setup for quick prototyping.
5. simple - The simplest possible Vue setup in a single HTML file
For this example I’ll use webpack
The vue-cli will let you go through a series of yes/no questions after which you will have a project ready with scaffolding.
cd into the project directory, it is the <project-name> in vue init <template> <project-name> and run npm install.
After the installation, run npm run dev.

Your hello world application is ready!