• Introduction
• About Vue
  • Vue’s Pros
  • Vue’s Cons
• Comparison with other Frameworks
  • Vue vs. React
  • Vue vs. Angular.js
  • Vue vs. Angular (Angular 2)
  • Summing Up
• Using Vue Templates
• Writing an App From Scratch
  • What a Vue app looks like
• Creating Vue App With Flatlogic Platform
• Wrapping Up
• Suggested Articles

Vue’s Pros

1. Reactivity

2. Flexibility

3. Tools and ecosystem

4. Readability

5. Virtual DOM rendering

6. Documentation

7. Reusability

8. Storage efficiency

Vue’s Cons

1. Flexibility

2. Reactivity Nuances

3. Cross-cultural barriers

4. Small-scale focus

Vue vs. React

Vue vs. Angular.js

Vue vs. Angular (Angular 2)

Summing Up the Comparison

Install Vue.js with NPM or Yarn

npm install -g @vue/cli

yarn global add @vue/cli

vue –version

npm update -g @vue/cli

yarn global upgrade –latest @vue/cli

Create a Vue App

vue create my-own-app

“Default” or “Manually select features”

Manually select features

• Babel
• Router
• Vuex
• CSS pre-processors
• Linter/Formatter

Make choices for the selected features

Router: Use history mode?

Pre-processor

Linter/Formatter config

1. ESlint with error prevention only
2. ESlint + AirBnb config
3. ESlint + standard config
4. ESlint + Prettier

Where to place config

Lint on save?

What a Vue App looks like

import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: h => h(App)
}).$mount("#app");

BasicApp

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  name: "BasicApp",
  props: {
    msg: String,
  },
};
</script>

App.vue

<template>
  <div class="app">
    <BasicApp msg="This is how we make a Vue app work" />
  </div>
</template>

<script>
import BasicApp from "./components/BasicApp";

export default {
  name: "App",
  components: {
    BasicApp,
  },
};
</script>

#1: Name your project

#2: Define tech stack

#3: Choose the design

#4: Define the schema

#5: Check and Finish

#6: Deploying the App

Using Vue Templates

• Business owners and managers who want to spend less time on website development and more time on other aspects of the business
• Those who need a web App ASAP and know the exact metrics a template has to meet
• Anyone else who needs a web App but doesn’t have the time or the will to learn web development (no judgment there)

Creating Vue Apps by Hand

• Want to learn by doing. Once you’ve learned the basics of Vue development, it’s time to put the knowledge to practice. Creating Apps of your own gives weight and context to your knowledge. For every How there’ll be a new Why, and vice versa. It’ll give you a better feeling of where to head next. If you’re an aspiring Vue developer, creating Apps is the natural thing to do.
  
• Need an App with specific features you cannot find in ready solutions. If you want to do something well, do it yourself. Such logic has faults of its own but it’s hard to deny: when you need something and it doesn’t exist, you might have to do it yourself.
  
• Have the time, the energy, and the self-esteem to try to do better. If you believe you can make a better solution than the ones out there, there’s one way to find out if you can. Try it, and then try some more. And don’t be afraid of thinking outside the box. If everyone stuck to existing practices, Henry Ford would’ve had to make faster horses, not cars.

Creating a Vue App with Flatlogic Platform

• Those who need an App for their business but don’t have the time or the expertise to develop one from scratch
• Web dev beginners who don’t have the experience to create their Apps yet, but want a better understanding of how an end product works. The free version is especially helpful here.
• Business owners and executives who need separate web platforms for several products. Flatlogic will help them create applications with equally reliable and functional inner mechanics.
• And everyone else who could use his or her web App.
  

Suggested Articles:

• Top 16+ Vue Open Source Projects
• 10+ Noteworthy Bootstrap Admin Themes Made With the Latest Version of Vue – Flatlogic Blog
• Vue vs React: What is Easier? What is Trending? [Detailed Guide with +/-]