This is a repo based upon the youtube video:
- from: The Earth Is Square
- author: Mitchell Romney
- youtube video: Learn Vue 3 for Beginners - Full 2020 Tutorial Course
You can STALK him via the following links:
Resources:
Video chapters:
- Setting Up
- Chapter 1 : Course Introduction
- Chapter 2 : Project Setup
- The Basics
- Chapter 3 : Building Single File Components
- Chapter 4 : Template Conditionals, Loops, & Styles
- Chapter 5 : Forms & Handeling User Input
- Chapter 6 : Dynamic Styling, SCSS & Global Styles
- Lets Get Advanced
- Chapter 7 : The vue 3 Composition API
- Chapter 8 : Routing With Vue Router 4
- Chapter 9 : Global State Management with Veux 4
- Chapter 10 : Deploying to Heroku
Cudos to Mitchell for creating the video !
DISCLAIMER:
Full rights for the content and video belong to Earth Is Square and Mitchell Romney.
This repo:
- twotter-tutorial
- author : denOldTimer
- was created for two resons:
- TO follow along with the video and recreate for learning purposes
- TO try and create a repo that has different branches for different stages {Chapters}
- My Notes on that you can reade the NOTES.MD file
- my environment:
- Device: Asus Gaming Laptop from yester year.
- OS: Ubuntu Linux 20.04 Desktop
- IDE : VS Code
SO LETS GET ON WITH IT !
basic understanding of HTML, CSS, JAVASCRIPT
This is where I did it differently:
- Created th e github repo
- Go to your root projects directory: for example
sudo cd /home/projects/vuejs
- run the command
vue ui
- click
Create
to create a new project - click the green button
Create a new Project here
- Fill out the form :
- name: twotter-tutorial
- package manager: npm (my preference) can choose yarn
- override target folder -> off
- scaffold project without beginner instructions -> off
- initialize git -> off ( do that later)
- click the green button
Next ->
- Select preset
Vue 3
as this is a vue 3 tutorial- click the green button
Create Project
- click the green button
!! WAIT until the project is created before continuing to the next step
- Repo: DO NOT CLONE YOUR REPO
- Initialize your local git
- Open your terminal:
ctrl alt t
- First create your local repo:
git init
- Add two files:
git add .gitignore README.md
- Commit to your local repo:
git commit -m 'init repo
- NEXT change the local branch fom master to main
- THis is a github preference
git branch -M main
- Next link your local repo to that on github.
git remote add origin [email protected]:<your username>/twotter-tutorial
- Last push your local's first commit the two files to remote repo:
git push -u origin main
- Open your terminal:
DOWNLOAD release 1.2.0
- data : The function that returns a data object for the component instance
- computed: Computed properties to be mixed into the component instance
- methods: Methods to be mixed into the component instance
- life cycle hook: mounted
- watch
DATA links: { data, props, computed, methods, watch, emits }
Lifecycle hooks : { beforeCreated, created, beforeMount, mounted,
beforeUpdate, updated, activated, deactivated, beforeUnmount, unmounted,
errorCaptured, renderTracked, renderTriggered }
DOWNLOAD release 1.3.0
-
Refactoring behind the scenes DOWNLOAD release 1.3.5
- v-if - add an Admin-badge - isAdmin true or false
- v-for - add a Twoots List
- DOWNLOAD release 1.4.1
-
Refactoring behaind the sences: new component TwootItem
- DOWNLOAD release 1.4.2
-
Events:
- from parent to child component pass data through the use of props
:username="user.username
- from child to parent component the use of emits : favourite()
- from parent to child component pass data through the use of props
-
create a form
-
create a label & textarea
-
create a select & dynamic options -
- the v-for is looping a list of options named
twootTyps
- the v-for requires a key - value pair
- twootTypes doesn't have a dedicated key (ex. id) so we add the index of the array as key
-
the v-model attribute for handeling form data
- v-model creates a sync link between de form input and a data component/variable/placeholder
- in our ex. textarea is v-model with data-> newTwootContent
-
the submit
-
normal submits refresh the html page, so to stop this we use
prevent
-
@submit.prevent="createNewTwoot"
-
if we prevent, we have to replace it with something else
createNewTwoot
-
- unshift => puts the item @ the top of the list = LIFO {last in, first out}
- push => pust the item @ the back of the list LILO {last in, last out}
-
-
- DOWNLOAD release 1.5.0
-
install two new files
- sass
npm i -D sass
- sass-loader
npm i -D [email protected]
- why version
10.1.1
because Vue 3 doesn't play nice with the latest version od sass-loader - restart your server
- sass
-
refactoring css to scss of the
UserProfile.vue
page -
refactoring css to scss of the
TwootItem.vue
page -
Dynamic styling: adding a word count to the form
- add an conditional class --exceed if newTwootCharacterCount > 180 chars
-
Global styling:
- IMPORTANT make shore your App.vue style lang="scss", otherwise your app will not startup with global stylings
- add a new folder styles and a file base.scss in the root of your src directory
./src/styles/base.scss
- create a
vue.config.js
file in the root of your project - restart server the vue.config.js isn't hot reload
-
DOWNLOAD release 1.6.0
- DOWNLOAD release 1.6.5
-
Documentation on composition api
-
refactoring of CreateTwootPanel to composition API syntax
-
refactoring of UserProfile to composition API syntax
-
TwootItem need no refactoring due to the fact that props work the same in both syntaxes.
-
refactoring of App to composition API syntax
-
DOWNLOAD release 1.7.0
-
Documentation on vue router 4 && simple routing from scratch
-
install router via browser vue ui -> plugins -> add router {at the top of the page}
-
Modified App.vue to work with the router to role it back just
ctrl z
-
Router guards are the before and after events of a route
-
DOWNLOAD release 1.7.0
- install using the vue ui
- DOWNLOAD release 1.7.0
- DOWNLOAD release 1.7.0