28,14 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Build Vue apps the right way using Vue CLI 3. Understand how the building blocks of Vue CLI 3 work including npm, webpack, babel, eslint, plugins, GUI, testing, and SCSS. Import third-party libraries and maintain your project.
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
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
Who this book is for
This book is for existing web developers and developers who are new to web development. You must be familiar with HTML, CSS, and JavaScript programming. Basic knowledge of the command line will be helpful but is not necessary.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 190
Veröffentlichungsjahr: 2019
Ähnliche
Vue CLI 3 Quick Start Guide
Copyright © 2019 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Pavan RamchandaniAcquisition Editor: Siddharth MandalContent Development Editor: Roshan KumarTechnical Editor: Snehal DalmetCopy Editor: Safis EditingProject Coordinator: Namrata SwettaProofreader: Safis EditingIndexer: Priyanka DhadkeGraphics: Jisha ChirayilProduction Coordinator: Aparna Bhagat
First published: April 2019
Production reference: 1300419
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78995-034-2
www.packtpub.com
Thanks to my family and friends for their support during the writing of this book.
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
Packt.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the author
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.
About the reviewer
Bogdan-Alin Bâlc is a software architect/tech lead with a passion for UI technologies. He has worked with JavaScript for the past 13 years, from the emergence of jQuery and Ajax to state-of-the-art solutions such as React, Angular, Ember.js, and Vue.js. When he is not fiddling with some new coding challenge, he spends his time with friends and family, watching sports or movies. Nowadays, he channels most of his efforts into making Vulcan Digital Reforging, one of the most successful and creative start-ups in Cluj. His passion for Vue.js pushed him to collaborate on other great books, such as Learning Vue.js, Vue.js 2 Cookbook, and Vue.js by Example.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Vue CLI 3 Quick Start Guide
Dedication
About Packt
Why subscribe?
Packt.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Introducing Vue CLI 3
Technical requirements
Setting up Vue CLI 3 on our system
Is Vue CLI 3 already available?
Installing Node.js using Node Version Manager
Why install NVM?
Installing NVM on Windows
Installing Vue CLI 3
Installing VS Code
Using Vue CLI with no configuration
The benefits of using Vue CLI 3
Default toolchain, fatigue level zero
Vue CLI 3 default app via the command line
Vue CLI 3 default app via the UI
Summary
Webpack in Vue CLI 3
The evolution of the JS language
The script tag
Immediately Invoked Function Expressions
The problem with IIFEs
Sharing third-party libraries in a team environment with NPM
JavaScript task runners and NPM scripts
Modules in JavaScript
Working with modules in Node.js
Module bundlers, a way to use modules in the browser
What is webpack?
How webpack works
Building a new project and running webpack on it
Running webpack on a project
Adding a Vue project via NPM and using webpack with it
Adding our Vue component as a JavaScript module
Compiling JavaScript modules with webpack
Adding options with the help of the webpack configuration file
Adding an HTML file so that we can render our Vue component
Giving webpack the ability to output an HTML file
Adding a .vue file as a JavaScript module
Adding a webpack loader to work with .vue files
Fixing the issue with our index.html file
Delivering HTML files via webpack with the help of html-webpack-plugin
Understanding Hot Module Replacement in Vue
Observing HMR updates
Summary
Babel in Vue CLI 3
Understanding Babel
The building blocks of @vue/cli-plugin-babel
Babel 7 in @vue/cli-plugin-babel
The role of babel-loader in @vue/cli-plugin-babel
The role of @vue/babel-preset-app
Other features of @vue/cli-plugin-babel
Using Babel and webpack in Vue 2 without Vue CLI
Installing the necessary NPM packages
Running webpack with ES5 code
Adding webpack-dev-server
Updating the methods option to ES6 syntax
Adding babel-loader to our webpack configuration
Updating our webpack configuration to work with babel
The problem with the this keyword in arrow functions in Vue
Recommended solutions to keyword problems
Adding one counter app
Summary
Testing in Vue CLI 3
Understanding Vue plugins
Beginning testing on a brand new Vue app
Adding a new project with Vue CLI UI
Adding the Jest plugin to our Vue app
Examining the updates
Adding the code for our Vue application
Writing our first unit test inside a Vue app with Jest 
Running our first unit test inside the Vue CLI UI
Importing mount from test-utils and writing another unit test
Mounting the component to be tested
Writing a failing assertion
Writing a passing assertion
Triggering a button click in our test
Test-driven development in Vue CLI 3
Improving our tests in Vue CLI 3
Watching our tests in Vue CLI 3
Writing end-to-end tests with Cypress
Introducing Cypress
Adding a Cypress plugin to our project
Verifying updates to package.json made by the Cypress plugin installation
Updating Cypress tests in our Vue app
Summary
Vue CLI 3 and Routing
Adding a new Vue project with vue-router and vuex
Configuring preset options through VS Code's command line
Adding vue-router and vuex
Adding ESLint and Prettier
Finishing the configuration
Installing all the plugins for our new project
Serving our project from the Vue CLI UI
Running the serve task from the UI
Working with routes in vue-router
Inspecting the two default routes
Inspecting project files
The contents of main.js
The App.vue file and router-link navigation
Rendering a Vue instance and mounting it into #app
Running the build task from the UI
Serving the app in production mode from the UI
Some basics of working with routes 
The router-view tag needs to be nested
Using named routes
Navigating to a route by triggering a method of a Vue instance
Working with nested routes
Lazy- loading routes
Working with dynamic routes
Summary
Using ESLint and Prettier in Vue CLI 3
What ESLint is, and how to configure it on its own
Installing npm packages globally versus installing npm packages locally
What is Prettier?
Running locally-installed npm modules on the command line using npx
Installing Prettier globally and running it on index.html
Running Prettier with npx
Working with ESLint
Installing ESLint globally and unsuccessfully running it from the command line
Running eslint --init command
Understanding the structure of .eslintrc.js config file
Running ESLint on a JavaScript file
Updating error level rules in ESLint
Configuring ESLint in Vue CLI 3 
Setting up ESLint configurations in Vue CLI 3 GUI
Using ESLint and Prettier together in a Vue CLI 3 UI project
Summary
Improving CSS with SCSS
Installing Bootstrap + Vue
Adding BootstrapVue as a plugin
Using the bootstrap-vue plugin to add styles to our project
Using SCSS in our project
Dealing with errors
Writing some SCSS in our project
Overriding bootstrap-vue styles
Using variables, mixins, and interpolation
Using Sassmeister to practice SCSS
Using SCSS mixins and interpolation in our Vue project
Summary
Deploying Vue CLI 3 Apps on GitHub Pages
Installing GitHub Desktop app
Understanding how Git works
Starting a new Vue app and tracking changes with Git
Committing changes to our app
The three trees concept
Branching in Git
Merging branches
Registering a new GitHub account
Adding origin/master using GitHub Desktop
Publishing your local repository
Publishing our project on GitHub Pages
Getting our project ready to be published
Updating the Vue configuration file
Saving changes and pushing them to the remote repository with GitHub Desktop
Debugging your GitHub pages deployment
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
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.
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-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.
To get the most out of this book
To get the most of this book, you should be somewhat familiar with using Windows, HTML, CSS, the very basics of JavaScript, and using a command-line tool such as Git Bash for Windows. It would be beneficial to have some familiarity with Node, NPM, and some basic command line utilities, but this is not compulsory.
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packt.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Vue-CLI-3-Quick-Start-Guide. In case there's an update to the code, it will be updated on the existing GitHub repository.
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: http://www.packtpub.com/sites/default/files/downloads/9781789950342_ColorImages.pdf.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.
Introducing Vue CLI 3
This book introduces you to Vue CLI 3 and answers questions such as how to use it, why to use it, the best practices, and what you'll get out of it.
In this chapter, we'll look at how to set up Vue CLI 3 on our system. We'll begin by checking to see whether Vue CLI 3 is already available, and we'll see the exact steps to take if we either need a fresh installation or an update from a previous version.
We'll then look at how to install the Node Version Manager (NVM), and why that is a better alternative than simply installing Node. We'll see how easy it is to get started with Vue CLI 3 in VS Code, and how to integrate all these tools by using our command line.
We'll also discuss why Vue CLI 3 is great to use and work with, and we'll see this in practice, by running a default Vue CLI 3 app, both from the command line and by using the built-in Vue CLI 3 UI functionality.
The topics we will cover in this chapter include the following:
Setting up Vue CLI 3 on your system
Installing Vue CLI 3
Installing VS Code
Using Vue CLI with no configuration
The benefits of using Vue CLI 3
Avoiding JavaScript fatigue with the default toolchain
We'll begin this chapter by setting up Vue CLI 3.
Technical requirements
There are only a few technical requirements that we need; they are as follows:
A Windows installation (Windows 7 or greater)
An installation of NVM for Windows (the specific steps for the installation are described in the chapter)
An installation of VS Code (code editor)
Let's begin setting up Vue CLI 3 on our system.
Setting up Vue CLI 3 on our system
A common way to work with Vue CLI 3 is via a command-line app called the Command-Line Interface (CLI), where we run our Vue CLI 3 commands. Another prerequisite is to have Node.js installed on our machine.
If you are working on a shared computer, say, within a team of your fellow developers, the chances are that you already have all the prerequisites. In that case, you could just verify that you can start using Vue CLI 3 right away by running a couple of checks.
Is Vue CLI 3 already available?
To quickly check whether you can run Vue CLI 3 right now and skip all the installation steps, run the following command in your command-line app:
node --version
Also, check for Vue CLI 3 with this command:
vue -V
If you get back any version of Node above 8.9 (ideally, above 8.11.0), you're good to go. Obviously, for Vue CLI, you'd want any version above 3.0.0.
Additionally, if you have a version of Vue CLI lower than V3, or you'd like to update to the newest Vue CLI, such as 3.3.0, just run this command:
npm install @vue/cli
What if you don't have Node.js or Vue CLI installed?
We'll use nvm or nvm-windows for Node, and after that, we'll install Vue CLI 3.
Installing Node.js using Node Version Manager
What is the recommended version of Node.js we should be using? This information is available at the following link: https://cli.vuejs.org/guide/installation.html.
Currently, as of early 2019, to get the best results with Vue CLI, the minimum version of Node required is 8.11.0+, but you can kind of get by with 8.9 if you really have to.
This brings us to another important decision: the installation of NVM.
Why install NVM?
While it is not absolutely necessary to install NVM in order to run Vue CLI 3 on your system, installing NVM is desirable for a couple of reasons.
First, you never know when Node will get a recommended update with security fixes, which usually means you'd be better off installing the update on your machine.
Second, if you need to run a different technology, other than Vue, this other technology might also require a different version of Node. To easily switch between these required Node installations on your system, you can simply install NVM.
Installing NVM on Windows
You can download the NVM for Windows from this address:
https://github.com/coreybutler/nvm-windows/releases
Locate the nvm-setup.zip file, download and extract nvm-setup.exe from it, and then install it by following these installation steps:
Open the
Run
prompt by p
ressing
Windows +
R
. Type
cmd
into the prompt.
While inside the prompt, press
Ctrl
+
Shift
+
Enter
. This will run Command Prompt with administrator privileges, which is required for the next step.
Visit
https://nodejs.org
, and see the current
Long-term Support
(
LTS
) version number. For example, currently, on 64-bit Windows, the LTS version is 10.15.1.
To install it, run the following command in Command Prompt with administrator privileges:
nvm install 10.15.1
Command Prompt will log out the following message:
Downloading node.js version 10.15.1 (64-bit) ...
Once the download is finished, we can use the downloaded version of Node. We do it with the following command:
nvm use 10.15.1
Finally, you can verify whether the installation was successful by running the following command:
node --version
If you're curious about the version of
npm
that came with your Node installation, simply run the following:
npm --version
Next, we'll install Vue CLI 3.
Installing Vue CLI 3
We can install Vue CLI 3 with either npm or yarn. Since npm comes bundled with the Node.js installation, we'll use npm:
npm install -g @vue/cli
--loglevel verbose
The preceding command installs Vue CLI 3 globally. That's what the -g flag is for. The @vue/cli syntax is what we use in Vue CLI 3, and --loglevel verbose will log out the details of our installation, which is very useful, especially on slower connections and slower machines, where sometimes we could start wondering whether our console froze. With --loglevel verbose, there's more clarity, which is always good.
Once done, let's double-check the Vue CLI version installed by running this command:
vue --version
Here are a few other useful commands that you should try in your console:
vue -h
Note that vue -h is an alias for vue --help. I'm using the former as it's easier to type.
Also, note that you can run the -h flag on each individual vue command, for example:
vue create -h
vue add -h
vue invoke -h
vue inspect -h
vue serve -h
vue build -h
vue ui -h
vue init -h
vue config -h
vue upgrade -h
vue info -h
Running any of the preceding lines will return the usage instructions for the specific command, a description of what it does, and the options (the flags) to append to each individual command. Obviously, the -h flag is a great way to explore the capabilities of Vue CLI, and to refresh your memory on the fly, if need be.
Next, we'll install our code editor of choice, VS Code.
Installing VS Code
To install VS Code, simply navigate to https://code.visualstudio.com, and then download the appropriate version for your operating system.
Once VS Code is downloaded, simply install it by running the downloaded installation file and follow the installation instructions.
