[TDD] Learn Vue.js by Building and Deploying a CRUD App

Складчина: [TDD] Learn Vue.js by Building and Deploying a CRUD App

Изучите Vue, создав полнофункциональное веб-приложение!
​

Цели обучения

Этот курс научит основам Vue путем создания реального веб-приложения.

Веб-приложение, которое будет создано в этом курсе, предназначено для управления списком пользователей, которые хранятся в базе данных. Сайт такого типа называется приложением CRUD (создание, чтение, обновление и удаление), так как оно предоставляет ключевые функции для взаимодействия с базой данных.

К концу этого курса вы сможете:

Создайте веб-сайт, используя Vue, чтобы расширить функциональность веб-приложения.
Используйте ключевые директивы Vue (v-for, v-on, v-show, v-if, v-else), чтобы добавить логику в ваше веб-приложение.
Понять, как использовать методы и вычисляемые свойства
Создание динамического стиля веб-приложения с помощью привязки стилей
Создайте новый проект Vue, используя Vue CLI и Vue UI
Разработка приложения Vue с использованием инструментария, предоставляемого пользовательским интерфейсом Vue
Объясните, как компоненты являются строительными блоками для приложений Vue
Реализуйте модульные тесты для ваших компонентов Vue
Передача данных между компонентами с использованием реквизита и пользовательских событий
Понять жизненный цикл экземпляра Vue (и компонентов)
Используйте библиотеку axios для взаимодействия с внешним API (вызовы HTTP GET, POST, DELETE и PUT)
Реализовать макет библиотеки axios для модульного тестирования с использованием внешнего API
Перенос данных в Vuex Store
Реализация одностраничного приложения (SPA) с использованием Vue Router
Развертывание веб-приложения Vue в Интернете с помощью Netlify

Learning Objectives
This course will teach the fundamentals of Vue by building an actual web application. Each chapter in this course will build upon itself to achieve that goal of developing a web app.

The web application that will be built in this course is for managing a list of users that are stored in a database. This type of site is called a CRUD (Create, Read, Update, and Delete) application, as it provides the key functionality for interacting with a database.

By the end of this course, you will be able to:

1. Create a website using Vue to enhance the functionality of the web application
2. Utilize the key Vue Directives (v-for, v-on, v-show, v-if, v-else) to add logic to your web application
3. Understand how to use methods and computed properties
4. Create dynamic styling of a web application using style binding
5. Create a new Vue project using the Vue CLI and Vue UI
6. Develop a Vue application using the tooling provided by the Vue UI
7. Explain how components are the building blocks for Vue applications
8. Implement unit tests for your Vue components
9. Pass data between components using props and custom events
10. Understand the lifecycle of the Vue instance (and components)
11. Utilize the axios library to interface with an external API (HTTP GET, POST, DELETE, and PUT calls)
12. Implement a mock of the axios library to unit test using an external API
13. Migrate data to a Vuex Store
14. Implement a Single-Page Application (SPA) using Vue Router
15. Deploy a Vue web application to the web using Netlify

Спойлер: Содержание

Part 1 (Vue Fundamentals)

1. Introduction to Vue
2. Changelog
3. Initial Webpage
4. Getting Started with Vue
5. Displaying Lists with the v-for Directive
6. Using the v-on and v-show Directives
7. Using the v-if and v-else Directives
8. Introduction to Methods
9. Methods (Part II)
10. Computed Properties
11. Style Binding

Part 2 (Components)

1. Introduction to Components
2. Vue CLI
3. Vue UI
4. Components (Part II)
5. Unit Testing
6. Props
7. Components (Part III)
8. Custom Events
9. Unit Testing (Part II)

Part 3 (Working with an API)

1. Vue Lifecyle
2. TDD: Loading data via GET
3. TDD: Message Banner
4. TDD: Saving data via POST
5. TDD: Deleting data via DELETE
6. TDD: Updating data via PUT

Part 4 (Vuex and Vue Router)

1. Introduction to Vuex
2. TDD: Vuex (Part II)
3. TDD: Vue Router
4. Deploying to Netlify
5. Conclusion