Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    Vue CLI 3 Quick Start Guide: Build and maintain Vue.js applications quickly with the standard CLI
    Vue CLI 3 Quick Start Guide: Build and maintain Vue.js applications quickly with the standard CLI
    Vue CLI 3 Quick Start Guide: Build and maintain Vue.js applications quickly with the standard CLI
    Ebook331 pages2 hours

    Vue CLI 3 Quick Start Guide: Build and maintain Vue.js applications quickly with the standard CLI

    By Ajdin Imsirovic

    ()

    Read preview

    About this ebook

    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.

    LanguageEnglish
    PublisherPackt Publishing
    Release dateMay 2, 2019
    ISBN9781789956849
    Vue CLI 3 Quick Start Guide: Build and maintain Vue.js applications quickly with the standard CLI

    Read more from Ajdin Imsirovic

    Related to Vue CLI 3 Quick Start Guide

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Discover Easy-to -build Desktop Apps

      Oct 22, 2019

      Electron is actually a browser packaged with node.js and a few APIs. Because it’s built on top of the Chromium browser, you have everything available from there to add to your application. GitHub developed it as part of the Atom editor; it was open-s

      7 min read

    • Article

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • Article

      Create Smaller Sized Apps With React

      Nov 19, 2019

      You may not be surprised that some developers have criticised Electron (see tutorials LXF256), mostly regarding the memory usage of its final binaries. The initial binary is over 100MB, because a major chunk of code from Chrome is embedded. When you

      6 min read

    • Article

      Top 10 Programming Languages

      Jan 5, 2023

      Top 10 Programming Languages
      8 min read

    • Article

      Assessing Ease Of Use

      Jul 28, 2020

      Assessing Ease Of Use
      3 min read

    • Article

      Mind Your Language!

      Apr 4, 2023

      Mind Your Language!
      9 min read

    • Article

      How To Create Your Own Android Apps Without Coding

      Oct 21, 2019

      THIS ANDROID HOW-TO explores new territory for many readers, but we really wanted to answer the questions: Can you create a mobile device app without becoming a programmer? Is it affordable, and is it worth the effort? It all started when an app-buil

      4 min read

    • Article

      Visual Studio Code 1.74

      Mar 7, 2023

      Visual Studio Code 1.74
      2 min read

    • Article

      Developer Tools

      May 2, 2022

      Developer Tools
      1 min read

    • Article

      Developer Tools

      Mar 1, 2022

      Developer Tools
      1 min read

    • Article

      RapidWeaver Classic

      Aug 23, 2022

      RapidWeaver Classic
      3 min read

    • Article

      Build Your Own Home CCTV System

      Jan 9, 2024

      If you feel ‘admin’ is too insecure a username for your main account, after setting your password, browse to the MotionEye configuration folder and open motion.conf in a text editor. Uncomment the # @admin_ username admin line and change admin to you

      11 min read

    • Article

      Automotive Grade Linux

      Nov 16, 2021

      Automotive Grade Linux
      9 min read

    • Article

      20 New Features In Windows 10

      Jul 9, 2020

      20 New Features In Windows 10
      12 min read

    • Article

      HotPicks

      Jul 28, 2020

      HotPicks
      13 min read

    • Article

      Top 10 Apps For Bloggers

      Jun 17, 2021

      Top 10 Apps For Bloggers
      3 min read

    • Article

      Client-free Remote Desktop Access For All

      Sep 24, 2019

      Guacamole is a open-source software project consisting of a client and server component that work together to enable remote connectivity to server environments from a web browser. In fact, this open-source project goes back as far as 2010, having spe

      9 min read

    • Article

      1Password 8

      Feb 8, 2022

      1Password 8
      2 min read

    • Article

      Exclusive Downloads

      Oct 31, 2022

      View, edit and organise your photos. Ashampoo Photo Commander 16 is a powerful all-in-one solution to view, edit and organise your photos. Features include automatic image optimisation plus manual effects and various tools to recover faded images, r

      2 min read

    • Article

      Usability

      Oct 19, 2021

      Usability
      3 min read

    Related categories

    Reviews for Vue CLI 3 Quick Start Guide

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Vue CLI 3 Quick Start Guide - Ajdin Imsirovic

      Vue CLI 3 Quick Start Guide

      Vue CLI 3 Quick Start Guide

      Build and maintain Vue.js applications quickly with the standard CLI

      Ajdin Imsirovic

      BIRMINGHAM - MUMBAI

      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 Ramchandani

      Acquisition Editor: Siddharth Mandal

      Content Development Editor: Roshan Kumar

      Technical Editor: Snehal Dalmet

      Copy Editor: Safis Editing

      Project Coordinator: Namrata Swetta

      Proofreader: Safis Editing

      Indexer: Priyanka Dhadke

      Graphics: Jisha Chirayil

      Production 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.

      – Ajdin Imsirovic

      mapt.io

      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

      Enjoying the preview?
      Page 1 of 1