Book Image

The Majesty Of Vue.js

By : Alex Kyriakidis, Kostas Maniatis
Book Image

The Majesty Of Vue.js

By: Alex Kyriakidis, Kostas Maniatis

Overview of this book

<p>Vue.js is a library to build interactive web interfaces. The aim is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.</p> <p>This book will teach you how to efficiently implement Vue.js in your projects. It starts with the fundamentals of Vue.js to building large-scale applications. You will find out what components, filters, methods, and computed properties are and how to use them to build robust applications.</p> <p>Further on, you will become familiar with ES6, single file components, module bundlers, and workflow automation. The best way to learn to code is to write it, so there’s an exercise at the end of most of the chapters for you to solve and actually test yourself on what you have learned. You can solve these in order to gain a better understanding of Vue.js.</p> <p>By the end of this book, you will be able to create fast front-end applications and increase the performance of your existing projects with Vue.js integration.</p>
Table of Contents (23 chapters)
The Majesty of Vue.js
Credits
About the Authors
www.PacktPub.com
Preface
2
Getting Started
8
Consuming an API – Preface
12
ECMAScript 6
15
Swapping Components
18
Closing Thoughts

Webpack template


To complete the setup of our project we need to install its dependencies. Let's move on and run:


cd stories-classic-project
npm install
npm run dev

The terminal outputs listening at http://localhost:8080. You should wait until the webpack: bundle is now VALID message is posted. Then you are lit!

Server running...

Tip

When you are using Webpack template you get nice things, such as hot-reload, warnings for errors on-save, and many more. But be careful, you have to be explicit in your code. Otherwise you will get errors for extra empty lines between blocks, trailing spaces, indentation other than 2 spaces, and other stuff that don't follow the selected style's rules.

Error overlay

Note

If you use webpack-simple you will still have the basic features, but the error overlay won't display in the browser, so check the terminal for any errors.

Project structure

After completing the preceding steps you should have a project directory filled with all the necessary files:

...