Description
Vue.js: Understanding its Tools and Ecosystem
by Dave Berning
Vue.js is a popular JavaScript framework that is flexible and easy to learn. Sometimes called, “the progressive JavaScript framework,” you can use Vue to enhance small webpages or use it to create large-scale enterprise applications.
The project was created by Evan You (formally at Google) in 2014 as a side project, but quickly evolved into a top JavaScript framework that competes with React.js and Angular; both of which are backed by multi-billion dollar corporates, Facebook and Google respectively.
Now, Vue.js is backed financially by the developers that use it through crowd funding. The project is now managed by an established group of talented engineers known as the “Vue.js Core Team.” These developers help maintain manage pull requests, maintain its stellar documentation, and help build tools, which is discussed in this book. With that said, the overall direction of the main Vue.js library is still very much under the direction of creator, Evan You.
With this book, you will get a crash course on the main Vue.js library to first understand it’s main concepts and syntax. Although prior Vue.js experience is not needed, it is recommended. This book covers all of the important tools and ecosystem, and these most of these tools have been created by the Core Team and some from its Community Partners.
This book will also go over the main Vue.js library, as well as it’s first-party accompanying libraries: Vuex for state management and Vue Router for routing. In addition to those, the book will also get you acquainted with Community Partner frameworks like NativeScript for native mobile app development, and Nuxt.js for server-rendered applications. Other technologies covered (some of which were released this year) include: TypeScript, Vue DevTools, Vue CLI 3, and VuePress.
With “Vue.js: Understanding It’s Tools and Ecosystem,” you will quickly learn Vue.js and the popular technologies that make up its every growing ecosystem. By the end of this book, you should be able to navigate and create enterprise level applications using Vue.js and it’s tools. So, get familiar here with one of the fastest growing frameworks and communities in the front-end world today!
Table of Contents:
CHAPTER 1: Getting Started with Vue.js 15
Understanding the Virtual DOM 15
Installing Vue.js 16
Understanding the Vue Instance 16
The Data Property 18
The Methods Property 19
The Computed Methods Property 20
The Watch Property 22
Lifecycle Methods 22
Understanding Directives 25
The v-for Directive 26
The v-show Directive 27
The v-if, v-else, v-else-if Directives 28
The v-on Directive 28
The v-bind Directive 29
Event Handling 30
Event Modifiers 31
Key Modifiers 32
Conclusion 33
CHAPTER 2: Scaffolding Projects With Vue CLI 3 35
Getting Started With Vue CLI 3 35
A Quick Tour of the Generated Project 38
The Directory Structure 38
The Single File Vue Component 40
Importing Child Components 42
Props 42
Slots 47
Using Pre-Processors 49
CSS Pre-Processors 50
SASS/SCSS 50
LESS 50
Stylus 50
HTML pre-processors 51
PUG 51
Modifying Webpack Configs Without Ejecting 51
Using the Vue CLI GUI 52
Conclusion 55
CHAPTER 3: Navigation with Vue Router 57
Using Vue Router with Plain JavaScript 57
Using Vue Router Within a Module System (Webpack, Node, Vue
CLI) 59
Routing to Another Route 62
Routing Using String Paths 62
Routing Using Names and Parameters 63
Routing with Named Views 64
Using Aliases and Redirects 65
History Mode and Server Configurations 66
Apache 67
Nginx 67
Native Node.js 67
Internet Information Services (IIS) 68
Cady 68
Firebase Hosting 68
404 Fallback 69
Conclusion 69
CHAPTER 4: State Management with Vuex 71
Installing and Setting Up Vuex 72
Adding and Reading Initial State Data 74
Using Actions to Mutate the State 75
The Actions, Mutations, and State Flow 76
Actions 76
Mutations 78
Getters 79
Mapping Store Properties with Helper Functions 80
Mapping State With mapState 80
Using Actions with mapActions 81
Using Mutations with mapMutations 83
Using Getters With mapGetters 84
Putting It All Together 85
Preliminary Set-Up 85
Refactoring with mapActions and mapState 96
Conclusion 97
CHAPTER 5: Debugging With Vue DevTools 99
Installing the Vue DevTools 99
Navigating Through the DevTools 100
The Components Pane 100
The Vuex Pane 102
Time Traveling 102
Modifying a Component’s Data 103
Integrating and Using the Vue.js DevTools Electron App 104
Installing the DevTools Locally 104
Conclusion 105
CHAPTER 6: Server-Side Rendering with Nuxt.js 107
How Does Server-Side Rendering Work? 108
A Little About Nuxt.js 109
Getting Started With Nuxt.js (Manual) 109
Getting Started With the Starter Template (Recommended) 111
Getting Started With “Create Nuxt App” 112
The Directory Structure 118
Creating Pages and Routes 119
Creating Dynamic Pages and Routes 120
Navigating Between Routes 121
Layouts 123
Assigning Layouts to a Page 126
Creating an Error Layout 126
Route Transitions 128
Basic Usage 128
Modifying the nuxt-config.js file 131
Modifying the Loading Bar 132
Adding Plugins 133
Registering Your Own Global Components 135
Adding Middleware 136
Fetching Data With fetch() and asyncData() 137
Nuxt Generate and Nuxt Build 139
Conclusion 140
CHAPTER 7: Static Site Generation with VuePress 143
Installing VuePress 144
Using Vue Components in Markdown Files 145
Creating Page Layouts 148
Routing in VuePress 153
Using VuePress for Documentation 156
Creating a Title and Navigation 156
Creating the Sidebar 157
Creating Translated Pages 158
Conclusion 161
CHAPTER 8: Mobile App Development with NativeScript for Vue.js 163
Installation 164
Prerequisites for macOS and Windows 164
macOS Installation 165
Windows Installation 166
Getting Started with Playgrounds 168
Differences Between Vue.js and NativeScript 168
Playing With the Code 168
Conclusion 173
CHAPTER 9: Greater Control of JavaScript and Type Casting with
TypeScript 175
What Is TypeScript? 175
Installation 176
Type Casting with TypeScript 178
Declaration Files 179
Interfaces 180
Classes 182
Using TypeScript With Vue.js 184
Basic TypeScript Usage 185
TypeScript Usage in Components 186
Using Class-Style Components With Decorators 187
Conclusion 190
CHAPTER 10: The Future of Vue.js and Adoption Rates 191
More Companies Are Adopting Vue.js 192
Conferences 193
Podcasts 193
Conclusion 193
Price: $22.99 USD
ISBN 9781939902597
194 pages
Published October 2018
