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-by-step 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.
