Vue.js – Get Started

Vue.js

Vue.js is frontend development frame by javascript.
Same as Angular, React, it becomes popular these days.

Before starting, I need to explain my experiences.
I am currently team lead of one service.
These days, my main part is pure javascript, Android Java, iOS Swift, Spring Boot java.
Team members and I use frontend framework
Experience

Framework Level
Angular 1 I develop and maintain 2 apps for work. I could manage and create app from scratch(using grant and not easy to do it)
React Team uses but, I am not involved mainly, I could set up webpack from scratch and understand basic part and redux basics

To understand other framework, vue seems to be easy, I think.
But, most difficult part is to reach level of developing application and service smoothly.
And to find best practice for team is also not easy.

Get started(easy sample)

This is full codes of simple Vue.js

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
    </script>
  </body>
</html>

Explain

  • Import latest vue.js using CDN
  • Run vue codes in script tag

In script tag, create Vue object with el(target element) and data(binding data).