▶Book Description
The sprawling landscape of various tools in JavaScript web development is becoming overwhelming. This book will show you how Vue CLI 3 can help you take back control of the tool chain. To that end, we'll begin by configuring webpack, utilizing HMR, and using single-file .vue components. We'll also use SCSS, ECMAScript, and TypeScript. We'll unit test with Jest and perform E2E testing with Cypress.
This book will show you how to configure Vue CLI as your default way of building Vue projects. You'll discover the reasons behind using webpack, babel, eslint, and other modern JavaScript toolchain technologies. You'll learn about the inner workings of each through the lens of Vue CLI 3. We'll explore the extendibility of Vue CLI with the built-in settings, and various core and third-party plugins.
Vue CLI helps you work with Vue components, routers, directives, and services in the Vue ecosystem. While learning these concepts, you'll examine the evolution of JavaScript. You'll learn about use of npm, IIFEs, modules in JavaScript, Common.js modules, task runners, npm scripts, module bundlers, and webpack. You'll get familiar with the reasons why Vue CLI 3 is set up the way it is. You'll also learn to perform linting with ESLint and Prettier.
Towards the end, we'll introduce you to working with styles and SCSS. Finally, we'll show you how to deploy your very own Vue project on Github Pages.
▶What You Will Learn
- Work with nvm, install Node.js and npm, use Vue CLI 3 with no configuration, via the command line and the graphical user interface
- Build a Vue project from scratch using npm and webpack, and learn about hot module replacement
- Work with Babel settings, configurations, and presets
- Work with Vue plugins, including testing plugins such as Jest and Cypress
- Write, run, and watch unit and E2E tests using TDD assertions in the red-green-refactor cycle
- Work with Vue router and use, nested, lazy-loading, and dynamic routes
- Add SCSS to your projects and work with third-party Vue plugins
- Deploy your Vue apps to Github Pages
▶Key Features
- Learn to work with Vue CLI 3 both on the command line and with a GUI
- Manage VueJS apps, settings, Vue plugins, and third-party libraries
- Learn how to build Vue apps from scratch using webpack, babel, ES6, vue-router, Jest, Cypress, SCSS, and Git
▶Who This Book Is For
This book is for web developers and JavaScript developers who want to learn more about Vue CLI 3. The readers must have basic knowledge of HTML/CSS and JavaScript. Essentially, the reader should also be familiar with basic operational system workflow, such as using a UNIX-like command-line interface, including Git Bash, Windows PowerShell, or any related command-line tool.
This book dives into the technological building blocks of Vue CLI 3. This is not a book about writing apps in Vue. It is more of a foundational book that will help you understand how things work inside Vue CLI. If you were never completely sure how NPM works and how to use it properly, this book will explain that, through the lens of Vue CLI 3. Similarly, we'll look at webpack, HMR, using single-file .vue components, SCSS, ECMAScript, unit testing with Jest, and E2E testing with Cypress.
▶What this book covers
- Chapter 1, Introducing Vue CLI 3, explains how to use Vue CLI 3, and why you should use it. It covers best practices and what you'll get out of using Vue CLI 3. We'll set up Node version manager and NPM, install Vue CLI 3, and show how to start a new app through the command line or with the help of the GUI.
- Chapter 2, Webpack in Vue CLI 3, takes the reader through an overview of the evolution of JavaScript over the last several years, which lead to the appearance of webpack. In explains some background concepts: NPM and NPM scripts, CommonJS, modules in JS and Node.js, along with module bundlers and how they can be used in the browser. Further on, we cover webpack, how it works, and how to run it. We close off the chapter with a step-bystep explanation of how to add a Vue project via NPM and use webpack with it. Essentially, we're setting up a Vue toolchain by hand, so that we can appreciate what Vue CLI 3 does for us automatically.
- Chapter 3, Babel in Vue CLI 3, examines how to work with Babel and what are the benefits of using it. We inspect the building blocks of Vue's core Babel plugin, including Babel 7, babel-loader, and @vue/babel-preset-app. We also look at the differences between running webpack with ES5 and ES6, and updating our webpack configuration so that it understands Babel.
- Chapter 4, Testing in Vue CLI 3, covers using Vue plugins, with a focus on plugins that are used for testing. We add the Jest plugin to our Vue app, run unit tests with Jest, and show some additional techniques and workflows inside Vue CLI 3 GUI, including running tasks from the Project tasks page and running unit tests inside the GUI. We discuss test-driven development (TDD) and working with assertions, and close the chapter with an overview of Cypress.
- Chapter 5, Vue CLI 3 and Routing, discusses adding Vue projects with vue-router and vuex, configuring preset options, and understanding vue-router topics. These include named routes, dynamic routes, navigating to routes using methods in Vue instances, working with child routes, and lazy-loading routes.
- Chapter 6, Using ESlint and Prettier in Vue CLI 3, shows us what ESLint is and why it's useful. We also look at Prettier, a handy code formatter that formats your code on every save. We discuss linters in general and what they're useful for.
- Chapter 7, Improving CSS with SCSS, describes the basics of SCSS and shows how it's different from CSS and what additional features are available. We use a simple app we built in Chapter 5, Vue CLI 3 and Routing, and we see how to improve its styling by adding the boostrap-vue plugin to the app. Working with SCSS in VDOM libraries can sometimes get confusing, and in this chapter, we see one possible workflow option in practice.
- Chapter 8, Deploying Vue CLI 3 Apps on GitHub Pages, explains what Git is and how to set it up. We discuss some basics, including tracking changes with Git and committing changes in our app. We continue by discussing the three trees concept, branching, and merging branches. We register a GitHub account, add the origin/master using GitHub Desktop, and look at how to publish a local repository. We finally discuss how to deploy a Vue app on GitHub pages using the subtree functionality.
