Book Image

Vue.js: Understanding its Tools and Ecosystem

By : Dave Berning
Book Image

Vue.js: Understanding its Tools and Ecosystem

By: Dave Berning

Overview of this book

Vue.js is one of the top three “go-to” JavaScript frameworks and is used by organizations such as Nintendo, NASA, and Expedia. This book is primarily focused on the ecosystem of Vue.js and its development tools. Understanding the basics of the technology behind the Vue.js ecosystem will improve your skills and make you a better problem solver. The book begins with a brief overview of Vue.js. You’ll learn to work your way through the Vue command line interface CLI 3, and use the Vue Router library to navigate between the different views of your application. As you advance through the topics, you’ll explore the use of DevTools to improve the quality of your applications and how to implement server-side rendering in your application through the Nuxt.js framework. Toward the end of the book, you’ll read about the future of Vue.js and its growing popularity. After reading this book, you’ll be able to create industry-grade applications using Vue.js and its tools.
Table of Contents (11 chapters)

A Quick Tour of the Generated Project

As mentioned in the previous chapter, all projects in this book will be generated from Vue CLI 3.

When a project is generated with Vue CLI, components are bootstrapped into a centralized Vue Instance. These Vue components are singular files that contain all of the HTML, JavaScript, and CSS that the component needs in order to render and function.

The Directory Structure

After you selected your configuration options, a new window with the Vue.js logo should open up in your default browser.

The Vue CLI Start-Up Screen

If you see something similar, Vue CLI successfully generated your project! Delving further into the project, your directory structure should resemble the figure below. All of your work will be done within the src directory.

The Vue CLI Start-Up Screen

Note: This project example has Vuex, CSS pre-processors, and Vue-Router installed. Your directory structure may be different.

The Node Modules Directory

The node_modules directory contains all of the npm packages needed for your application...