Developing Faster with the Vue CLI

Course Overview
(Music) Hi everyone. My name is John Papa. Welcome to my course, Developing Faster with the Vue CLI. I'm a web architect and JavaScript developer expert, and I'm very excited to share this course with you. This course gently introduces how to create, debug, test, build, serve, and extend Vue applications using the Vue CLI and popular Vue developer tools. You will learn how to hone your Vue skills and develop great apps quickly. Some of the major topics that we will cover include creating and customizing a new Vue application; building Vue apps, libraries and web components; debugging Vue applications with Chrome and Visual Studio Code; extending your Vue app with Vue CLI plugins such as Vuex, ESLint, and Progressive Web Apps; and learning the Vue CLI's UI, a graphical user interface for interacting with the Vue CLI. By the end of this course, you'll have learned these concepts and more, and be well on your way to building Vue apps. Before beginning this course, you should be familiar with JavaScript, but you don't have to be an expert by any means. Please join me on this journey to learn the Vue CLI, with the Developing Faster with the Vue CLI course, on Pluralsight. We hope you enjoy it.

Getting Started with the Vue CLI
Hi, my name's John Papa. Welcome to my new course, Developing Faster with the Vue CLI. Thanks for joining me here at Pluralsight. In this first module, we're going to get started with the Vue CLI. We'll start by learning what the Vue CLI does for you, and then of course why you should use the Vue CLI, and then we'll go through a couple different demos or tours, the first of which is touring the zero configuration options, which help us get started quickly. And then we'll tour the Vue CLI itself. And finally, we'll take a look at the Vue CLI's UI. Yeah, you heard that right. The Vue CLI has a user interface, and it has some pretty impressive features, so let's dive right in.

Setting up the Vue CLI
Before we kick it into high gear, it's important to know how to set up the Vue CLI so you can be set up for success. So in this module, we'll talk about what you need to set up the Vue CLI, which of course includes installing the prerequisites. We'll go through what those are and then we'll check how you can make sure that you installed the right versions, which is also important in case new versions come out so you can make sure you know how to look at those versions to then update them to the latest versions. Once we verify the versions, we'll then check out if the setup actually works for us, and we'll do that by creating a Vue application. We'll do this twice actually in a couple different ways just so we can make sure everything is working properly. Once we do that, we can have high confidence that we are ready to roll.

Mastering Essential Vue Tools
One of the best positive influences that we can have in our development experiences is using great tooling, and that applies to Vue developers as well. In this module, we're going to talk about the essential Vue tools that are going to help you become a great Vue developer. We'll start off by talking about the single most impactful tool that you can have in your toolbox, and of course that is the Vue CLI, and sometimes when you're just not sure how to solve a problem, don't worry, there's some great Vue documentation for various libraries up there, and we'll take a look at some of those so you know how to find them. We live in the browser, so it's important to know how to use the browser tooling. We'll look at some plugins that you can use inside the browser and how we can do debugging in the browser for our Vue applications. Now when it comes time to open up our editor, we'll take a look at some great tools, things like code snippets and a great extension called Vetur, which helps us with writing Vue applications inside of tools like Visual Studio Code. This entire module is very demo driven, so let's go ahead and dive into all the Vue tooling that you need to have in your toolbox.

Creating a Vue Application
As developers, when we start to build a new application, so many thoughts go through our heads when we stare at that blank screen. What files am I going to create? What features do I need? Are there any settings I want to have right out of the gate? What's the folder structure going to look like? Vue CLI can help answer all of these for us, which is great. So in this module, we're going to walk through creating a Vue application. Sometimes we need to get it started quickly, and we'll learn the options that we can do to get out of the gate fast, and then we're going to look through all the different creation options because there's so many creation options for creating a brand-new project. When we walk through using the Vue CLI, it's going to ask us a lot of questions. These are called prompts. We'll learn what these prompts are and how we can save and share and then reuse these favorite answers of ours from the prompts. By the end of this module, you'll have mastered how to customize the Vue CLI to generate new projects just the way you need them.

Building and Serving Vue
I'm a developer, and writing code is where it's at. But when we're done writing code, it's super important to make sure you've got a good build process to make sure that you can build the applications to deploy them effectively to your web servers. In this module, we're going to look closely at how we can build and serve Vue applications using the Vue CLI. We'll kick things off by going through the Vue CLI service and understanding its role in building and serving. We'll explore serving first and look at the different options in how to serve our code, especially for that dev development lifecycle. Then we'll look at building apps a little bit closer, and we can build applications, we can build libraries, and we can build web components with the Vue CLI. By the end of this module, you'll have a good understanding of the differences between apps, libraries, and web components, and how to do them yourselves.

Running Unit and End to End Tests
One of the key aspects to using the Vue CLI is how easy it makes it to write and run and then rerun end-to-end and unit tests. In this module, you'll learn how to use the Vue CLI to test your Vue applications both with unit tests, of course with all the options you have with unit tests, and with end-to-end testing and looking at the options for end-to-end testing that come out of the box with the Vue CLI. Let's dive in.

Adding Packages and Plugins to Your Vue App with the Vue CLI
One of the most common things you're going to do when building a Vue application is want to extend your application with other dependencies, with packages, and plugins to really light up some of the features in your app. In this module, we'll talk about how you can do that using the Vue CLI. First, we'll start off understanding what Vue plugins are, and then how we can use those not only to install dependencies, but also to configure our applications. We'll explore how we can find these Vue plugins, then of course we'll walk through how you can add and use the plugins in your applications. Let's dive in.

Creating Vue Apps with Vue CLI's UI
You've learned how to interact with the Vue CLI through the terminal commands, but sometimes it's super helpful to be able to use a graphical user interface. This is why the Vue CLI's UI was created. The Vue CLI has a UI. It's a graphical user interface that allows us to create, develop, and manage projects through a UI. It's designed for interacting directly with the Vue CLI. So we can do things through the terminal or we can use the Vue CLI's UI. We've already seen a few glimpses of the Vue CLI's UI throughout this course. In this module, we're going to take a deeper look at the Vue CLI's UI and tour the different features so we can get a feel for how to navigate through the Vue UI.