The reason why I learn this course is I want to write a vuepress plugin for a comments system called Livere.

Vue JS Crash Course

[[toc]]

Why use Vue?

  • Much easier
  • Organized well

What you should know before learning Vue?

  • JavaScript Fundamental.

It may help to learn these first

  • ES6 Module Syntax
  • High order Array Methods - forEach, map, filter
  • Arrow Functions
  • Fetch API & Promises

Anatomy of a component

::: tip Output

<templete>
    <div class='user'>
        <!-- So that we can use dynamic content. -->
        <h1>{{user.name}}</h1>
    </div>
</templete>

:::

::: tip Functionality

<script>
    export default {
        // Component Name
        name:'User',
        // A method
        data(){
            user:{name:'Brad'}
        }
    }
<script>

:::

::: tip Style

<style scoped>
    h1{
        font-size: 2rem;
    }
</style>

:::

Vue-CLI 3

  • Useful

::: tip VUEX You may use vuex to build a larger applications. :::

Let jump in

Setting up

You need to install:

  • node
  • Vue.js devtools plugin for chrome.
  • Vue CLI 3
    • yarn global add @vue/cli
    • vue --version

You can find document at

Create Vue Project

  • cmd
    • vue create test
    • cd test
    • yarn serve
  • gui
    • vue ui: Ready on http://localhost:8000
    • 8080 is for your app webpage

::: tip vue is a single page application. :::

Oooops

I stuck at here and don’t know why. Maybe, I’ll check out later.