Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the books product page, located at www.apress.com/9781484238042 . For more detailed information, please visit www.apress.com/source-code .
ISBN 978-1-4842-3804-2 e-ISBN 978-1-4842-3805-9
https://doi.org/10.1007/978-1-4842-3805-9
Library of Congress Control Number: 2018956735
Adam Freeman 2018
Standard Apress
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
Dedicated to my lovely wife, Jacqui Griffyth.
(And also to Peanut.)
Table of Contents
Part I: Getting Started with Vue.js
Part II: Vue.js in Detail
Part III: Advanced Vue.js Features
Index
About the Author and About the Technical Reviewer
About the Author
Adam Freeman
is an experienced IT professional who has held senior positions in a range of companies, most recently serving as chief technology officer and chief operating officer of a global bank. Now retired, he spends his time writing and long-distance running.
About the Technical Reviewer
Fabio Claudio Ferracchiati
is a senior consultant and a senior analyst/developer using Microsoft technologies. He works for BluArancio ( www.bluarancio.com ). He is a Microsoft Certified Solution Developer for .NET, a Microsoft Certified Application Developer for .NET, a Microsoft Certified Professional, and a prolific author and technical reviewer. Over the past ten years, hes written articles for Italian and international magazines and coauthored more than ten books on a variety of computer topics.
Part I Getting Started with Vue.js
Adam Freeman 2018
Adam Freeman Pro Vue.js 2 https://doi.org/10.1007/978-1-4842-3805-9_1
1. Your First Vue.js Application
The best way to get started with Vue.js is to dive in. In this chapter, I take you through a simple development process to create an application to keep track of to-do items. In Chapters , I show you how to create a more complex and realistic application, but for now, a simple example will be enough to demonstrate how Vue.js applications are created and how the basic features work. Dont worry if you dont understand everything in this chapterthe idea is to get an overall sense of how Vue.js works, and I explain everything in detail in later chapters.
Note
If you want a conventional description of Vue.js features, then you can jump to Part 2 of this book, where I start the process of describing individual features in depth.
Preparing the Development Environment
There is some preparation required for Vue.js development. In the sections that follow, I explain how to get set up and ready to create your first project.
Installing Node.js
The tools used for Vue.js development rely on Node.jsalso known as Nodewhich was created in 2009 as a simple and efficient runtime for server-side applications written in JavaScript. Node.js is based on the JavaScript engine used in the Chrome browser and provides an API for executing JavaScript code outside of the browser environment.
Node.js has enjoyed success as an application server, but for this book, it is interesting because it has provided the foundation for a new generation of cross-platform development and build tools. Some smart design decisions by the Node.js team and the cross-platform support provided by the Chrome JavaScript runtime have created an opportunity that has been seized upon by enthusiastic tool writers. In short, Node.js has become essential for web application development.
It is important that you download the same version of Node.js that I use throughout this book. Although Node.js is relatively stable, there are still breaking API changes from time to time that may stop the examples I include in the chapters from working.
The version I have used is 8.11.2, which is the current Long-Term Support release at the time of writing. There may be a later version available by the time you read this, but you should stick to the 8.11.2 release for the examples in this book. A complete set of 8.11.2 releases, with installers for Windows and macOS and binary packages for other platforms, is available at https://nodejs.org/dist/v8.11.2 .
When you install Node.js, make sure you select the option to add the Node.js executables to the path. When the installation is complete, run command shown in Listing .
node -v
Listing 1-1
Checking the Node Version
If the installation has gone as it should, then you will see the following version number displayed:
v8.11.2
The Node.js installer includes the Node Package Manager (NPM), which is used to manage the packages in a project. Run the command shown in Listing to ensure that NPM is working.
npm -v
Listing 1-2
Checking That NPM Works
If everything is working as it should, then you will see the following version number:
5.6.0
Installing the @vue/cli Package
The @vue/cli package is the standard way to create and manage Vue.js projects during development. You dont have to use this package, but it provides everything that is needed to get started with Vue.js, and I use it throughout this book.
Note
As I write this, the @vue/cli package has been released in beta. There may be small changes made before the final release, but the core features should remain the same. For details of any breaking changes, check the errata for this book, available at https://github.com/Apress/pro-vue-js-2 .