Vue CLI 3 Quick Start Guide

Build and maintain Vue.js applications quickly with the standard CLI

Ajdin Imsirovic 지음

Packt(GCO Science) 2019년 05월 02일 출간

작품소개

책소개

▶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.

목차

▶TABLE of CONTENTS
1. Introducing Vue CLI 3
2. Webpack in Vue CLI 3
3. Babel in Vue CLI 3
4. Testing in Vue CLI 3
5. Vue CLI 3 and Routing
6. Using ESLint and Prettier in Vue CLI 3
7. Improving CSS with SCSS
8. Deploying Vue CLI 3 Apps on GitHub Pages

책 속으로

▶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.

출판사 서평

▶ Preface
Vue began as a project of a single person, Evan You. It is amazing that it has gotten to the point where it is today: a contender for the spot of the favorite frontend framework, competing with the corporate-backed React and Angular.

Of course, these are not the only frontend frameworks, but the trio of Vue, React, and Angular seem to be the most popular, with the internet buzzing with comparisons of these frameworks and experiences with them. It's not uncommon to come across an article that compares Vue and React, for example, or a blog post on ten ways that Vue is better than Angular. Regardless of whether these articles are someone's opinion, or clickbait, or statement of the facts, there must be some truth to these claims.

What was the reason for Vue's success? Dedication, hard work, or luck? Probably a bit of each. But another key to Vue's success was Evan's obvious priority of making things easy for the developer. Vue's no longer developed by a single person, but it is still very approachable. The community has kept the gist of what Vue was all about from the beginning: an easy-to-use framework that gets out of your way and just lets you code.

Vue CLI is another example of this. Besides a command-line interface that's up to par with other modern frontend frameworks, Vue CLI 3 sets a new standard in frontend JavaScript frameworks, and comes with a graphical user interface (GUI). This interface makes it a breeze to set up, extend, run, and serve a Vue project.

When you pair this addition of a GUI with the successful attempt to ease the pain of toolchain fatigue by offering a really well thought-out setup process, you get a really powerful combination, and happy developers as a result.

인물정보

저자(글) Ajdin Imsirovic

Ajdin Imsirovic is a full-stack web developer who has published several courses on the subject of web design and web development. He has also authored three books, Bootstrap 4 Cookbook, Elm Web Development, and Vue.js Quick Start Guide. In his fourth book, Vue CLI 3 Quick Start Guide, he introduces readers to the rich ecosystem of frontend tooling and best practices.