Vue.js 2 and Bootstrap 4 Web Development电子书

Vue.js 2 and Bootstrap 4 Web Development

Table of Contents

Vue.js 2 and Bootstrap 4 Web Development

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Please Introduce Yourself – Tutorial

Hello, user

Creating a project in the Firebase console

Adding a first entry to the Firebase application database

Scaffolding a Vue.js application

Connecting the Vue.js application to the Firebase project

Adding a Bootstrap-powered markup

Adding a form using Bootstrap

Making things functional with Vue.js

Adding utility functions to make things look nicer

Exercise

Extracting message cards to their own component

Exercise

Deploying your application

Extra mile – connecting your Firebase project to a custom domain

Summary

2. Under the Hood – Tutorial Explained

Vue.js

Vue project – getting started

Including directly in script

CDN

NPM

Vue-cli

Vue directives

Conditional rendering

Text versus HTML

Loops

Binding data

Handling events

Vue components

Exercise

Vue router

Vuex state management architecture

Bootstrap

Bootstrap components

Bootstrap utilities

Bootstrap layout

Combining Vue.js and Bootstrap

Exercise

Combining Vue.js and Bootstrap continued

What is Firebase?

Summary

3. Let's Get Started

Stating the problem

Gathering requirements

Personas

User stories

Retrieving nouns and verbs

Nouns

Verbs

Mockups

The first page – login and register

The main page displaying the Pomodoro timer

Workout during the break

Settings

Statistics

Workouts

Logo

Summary

4. Let It Pomodoro!

Scaffolding the application

Defining ProFitOro components

Exercise

Implementing the Pomodoro timer

SVG and trigonometry

Exercise

Implementing the countdown timer component

Responsiveness and adaptiveness of the countdown timer using Bootstrap

Countdown timer component – let's count down time!

Exercise

Pomodoro timer

Exercise

Introducing workouts

Summary

5. Configuring Your Pomodoro

Setting up a Vuex store

Defining actions and mutations

Setting up a Firebase project

Connecting the Vuex store to the Firebase database

Exercise

Summary

6. Please Authenticate!

AAA explained

How does authentication work with Firebase?

How to connect the Firebase authentication API to a web application

Authenticating to the ProFitOro application

Making the authentication UI great again

Managing the anonymous user

Personalizing the Pomodoro timer

Updating a user's profile

Summary

7. Adding a Menu and Routing Functionality Using vue-router and Nuxt.js

Adding navigation using vue-router

Exercise - restrict the navigation according to the authentication

Using Bootstrap navbar for navigation links

Code splitting or lazy loading

Server-side rendering

Nuxt.js

Adding links with nuxt-link

Exercise – making the menu button work

Nuxt.js and Vuex store

Nuxt.js middleware

Exercise – finish 'em all!

Summary

8. Let's Collaborate – Adding New Workouts Using Firebase Data Storage and Vue.js

Creating layouts using Bootstrap classes

Making the footer nice

Storing new workouts using the Firebase real-time database

Storing images using the Firebase data storage

Let's search!

Using a Bootstrap modal to show each workout

Exercise

It's time to apply some style

Summary

9. Test Test and Test

Why is testing important?

What is Jest?

Getting started with Jest

Coverage

Testing utility functions

Mocking with Jest

Testing Vuex store with Jest

Testing mutations

Asynchronous testing with Jest – testing actions

Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components

Testing Vue components using Jest

Snapshot testing with Jest

Summary

10. Deploying Using Firebase

Deploying from your local machine

Setting up CI/CD using CircleCI

Setting up staging and production environments

What have we achieved?

Summary

Index