srosano / vuetodo

vuetodo

This is the Vue Crash Course (TodoList)

This is the code for the crash course on YouTube

I completed this tutorial after reading the vue documentation to get a deeper understanding of how vue.js works. I have learnt alot from the tutorial, but wish the tutorial had broken down the methodologies more to further understand how it was conceptually constructed. It may have been better to start with normal HTML scaffolding completed and then introduce what we trying achieve by introducing things logically.

For example here's how the we want the front-end to look like in pure HTML + CSS.

Okay now how can we use VUE to improve this.

What components do we need? To make the same html structure?

Okay let's implement javascript portion of the app

Why do we add export default? (could be explained better) What would we do in jquery/Vanilla javascript, how we would do it in vue easily.

Simple things that can be explained with comments and verbally. I would use both verbally and comments to explain why, what and how - Especially for props and methods. Describing what they are doing and achieving. Also explaining the use of captialisation in props, methods and components names.

The one thing that I realised is the babel configuration in the package.json messes with prettier and my configation for formatting and preference for quoting. You might see inconsistent quoting here as the I got fustrated with trying to override the babel.

Another thing that annoyed was the two id="app" in App.vue and Home.Vue, which could've been at least commented on.

Quick Start

# Install dependencies
npm install

# Serve on localhost:8080
npm run serve

# Build for production
npm run build