Angular View of developing Vue.js SPA application

Being an angular developer If you want to start your journey with Vue.js then this is very basic comparative related article where you can apply your knowledge of angular in vue.js development, by doing it as a vue.js way.

Very first step "How to Install" ?

   // Angular Installation.
        npm install -g @angular/cli

   // Vue.js Installation.
        npm install -g @vue/cli

   // After globally (-g) installation of CLI we can create project using..

   // Create New Project in Angular.
        ng new my-app

   // Create New Project in Vue.
        vue create my-project

Now, we understand proper way of how to install and create new project on both angular and vue using their own CLI. Both commands setups default app structure for us.

"How to Run Default App" ?

   // To run app in angular.
      ng serve -o        // this is serving app locally. 
      ng build --prod   // Building Angular app for production ready.

   // To run app in Vue.
      vue serve   // serve vue app locally.
      vue build   // building vue app for production ready.

"Both have index.html file". [ Left = Angular ; right = Vue ]

index.html file is served first from server to client as a SPA.

The only difference here is angular uses component-selector <app-root> directly in body of tag, while Vue uses and id="app" and render it inside <div>. also default javascript file is built.js is also included with <script> tag.

"Both have main.ts or main.js file".

   // Vue.js main.js file...

   import Vue from 'vue';
   import { App } from './app';

   new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
   });

   // Angular main.ts file...

   import { enableProdMode } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

   import { AppModule } from './app/app.module';

   platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
    // Ensure Angular destroys itself on hot reloads.
    if (window['ngRef']) {
      window['ngRef'].destroy();
    }
    window['ngRef'] = ref;

    // Otherwise, log the boot error
   }).catch(err => console.error(err));

The only difference here is that, angular uses ngModule() and loads main app-component using default app-module, while vue directly loads main <App/> component using main.js file and vue does not have any module system either.

"structure of App-Component"

   // app.component.ts in Angular...

   import { Component} from '@angular/core';

   @Component({
     selector: 'app-root',
     template: `
        <h1> {{ name }} </h1>
     `
   })
   export class AppComponent  {
     name = 'Angular ';
   }

   // Vue app component..

   export const App = {
     data: function () {
       return {
         message: 'Hello Vue!'
       }
   },
     template: `
       <h1>{{ message }}</h1>
     `
   }

In Vue app app.vue component file we define all html and component inside template:, and all component property are defined in data:, and both have same template binding syntax using {{ }}.

"Now lets have look at some of the features of DOM manipulate syntax"

Feature	Angular	Vue
Add/Remove Dom Element	*ngIf	v-if
Click-Event	(click)="someFunction()"	@click="someFunction"
Repeating Element	*ngFor	v-for
Two Way binding	[(ngModel)]	v-model
Data passing to component	@Input() item;	props: {item}
Data passing from component	@Output() item; item.emit('value')	this.$emit('value')
Template reference Variable	@ViewChild() id;	this.$ref.id
Life-Cycle Hooks	ngOnInit()	watch:{someMethod(){}}
Life-Cycle Hooks	ngAfterViewInit()	mounted(){}
Method defining	someMethod(){}	methods:{someMethod(){}}

Blog