Vue Framework 2.0 Tutorial

Vue framework is one of the most popular front-end frameworks nowadays. After spending one and a half year working with Vue I decided to record several videos to introduce you to the vue and vue ecosystem.

My tutorial starts with some theory about front-end frameworks and why do we need them and what kind of problems are front-end frameworks solving. After that I introduce you to the vue ecosystem.

After learning some theory we will create our first vue project using Vue CLI and we will start coding.

1. Introduction to the Vue Framework

In this video you will learn what is Vue Framework, what is Vue Ecosystem and why do we need frontend frameworks.

2. Vue Framework Use Cases

In this video we cover two main use cases of the Vue Framework. Progressive use case is when you want to integrate Vue Application in existing website for example an WordPress website or any other website you have. Another use case is when you want to implement completely new Single Page Application (SPA) using Vue Framework Ecosystem.

3. Install Vue Framework

In this video we covers three different ways you can start with Vue Framework. The first way is to add script tags to your website where you want to reference Vue’s core library. The second way is to install Vue using npm The third way is to install Vue Framework using Vue CLI Tool.

4. Hello World Application – Vue Tutorials

In this video we will create our first Hello World application using Vue Framework. 1.) We reference Vue’s Core library to our website 2.) We create our first Vue instance 3.) We add some data to print on the website

5. Hello World App (Part 2)

In this video we are playing more with our first Hello World application. We define more data and display it on the website. We also create second Vue instance so you can see that you can run multiple Vue applications in simple HTML website.

6. Install Vue CLI

In this video we will install Vue CLI tool that will help us to create and maintain existing Vue Projects. Vue CLI is one of the libraries in Vue Ecosystem.

7. Vue CLI – Create Project

In this tutorial we are going to create new project using Vue CLI.

8. Create project using Vue CLI UI (Website tool)

In this video we will create new project using GUI tool that comes together with Vue CLI. Using GUI tool we will select packages, plugins we want to install and we will learn how we can start our development server. We will also learn how we can build our application using GUI tool by running tasks in task area of the website. We will also learn how can we see some useful statistics about project size.

9. Explaining Babel and other project dependencies

In this video we will go through project dependencies. We will explain some important dependencies including: babel vue-template-compiler @vue/cli-service @vue/cli-plugin-babel”

10. Project structure and how Vue application starts

In this video I will explain you structure of the Vue 2.0 framework project. You will learn what is inside components folder, views folder, routes folder etc. Apart from the project structure you will learn what happens when you open Vue 2.0 application inside the web browser. You will see how webpack injects javascript files inside index.html file so your Vue application can be started.

11. SECTION 2 – Simulation of the real world project

In this video you will see what we are going to cover in the second section of my tutorials. We are going to simulate real world project where our client wants us to implement simple To-Do application. The client provided us with the design and that is the application we will implement in next videos. 💪

12. How to create new component

In this video we will start with new Vue application where we will start with our TO-DO application. After creating the project, we will create our first component where I will explain to you what is component, how every vue component is structured (template part, script part and style part) and you will also learn how to load that component so component is displayed in the web browser.

In this video we will define component data using data() function and will then print defined data inside the template. In this video you will learn first basic directives: v-text, v-bind, v-for. 💻Source code: https://github.com/codeepicenter/vue-tutorials/commit/83aebfa36b44cf50646b72f258495c1096b72f2f

14. Defining and displaying tasks using v-for directive

In this video you will learn how to define pending and finished tasks and how to print them on the page using v-for directive.

15. Styling application

In this video I will style TO-DO application and add missing input field and “Add” button for adding new tasks. I will also add a checkbox in front every task so user can select/unselect task. 💪

💻 Source code: https://github.com/codeepicenter/vue-tutorials/blob/91c11d142fc89420262e49de610ede678f6da147/src/MyComponent.vue http://code-epicenter.com/vue-framework-2-0-tutorial/2020-01-05T09:20:23+00:00Amir DuranUncategorizedVue framework is one of the most popular front-end frameworks nowadays. After spending one and a half year working with Vue I decided to record several videos to introduce you to the vue and vue ecosystem.
My tutorial starts with some theory about front-end frameworks and why do we need...Amir DuranAmirDuranamir.duran@gmail.comAdministratorAmir Duran is software engineer who currently lives and works in Germany. He obtained Masters degree diploma on Faculty of Electrical Engineering in Sarajevo, department Computer science. With good educational background he is specialized in designing and implementing a full-stack web based applications.Code Epicenter

Related Posts

About Amir Duran

Amir Duran is software engineer who currently lives and works in Germany. He obtained Masters degree diploma on Faculty of Electrical Engineering in Sarajevo, department Computer science. With good educational background he is specialized in designing and implementing a full-stack web based applications.