Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Vue CLI 3 Quick Start Guide
Vue CLI 3 Quick Start Guide

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

Arrow left icon
Profile Icon Imsirovic
Arrow right icon
Free Trial
Paperback May 2019 200 pages 1st Edition
eBook
NZ$26.99 NZ$38.99
Paperback
NZ$48.99
Subscription
Free Trial
Arrow left icon
Profile Icon Imsirovic
Arrow right icon
Free Trial
Paperback May 2019 200 pages 1st Edition
eBook
NZ$26.99 NZ$38.99
Paperback
NZ$48.99
Subscription
Free Trial
eBook
NZ$26.99 NZ$38.99
Paperback
NZ$48.99
Subscription
Free Trial

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Vue CLI 3 Quick Start Guide

Webpack in Vue CLI 3

In the previous chapter, we saw how to start using Vue CLI via both the command line and the UI. In this chapter, we will cover webpack basics from the viewpoint of Vue CLI 3. We will begin with an overview of what webpack is. We'll look at concepts behind module bundling, tree shaking, webpack loaders and output, webpack plugins, Hot Module Replacement (HMR), code coverage and code splitting, and then we'll look at how these concepts fit in with Vue CLI 3 as follows:

  • The evolution of the JavaScript (JS) language from the script tag to module bundlers
  • The script tag
  • Immediately Invoked Function Expressions (IIFEs), what problems they solve, and what problems they don't
  • How Node Package Manager (NPM) helps teams share third-party libraries in their code
  • The role of JS task runners and NPM scripts
  • What the CommonJS specification is and how modules...

The evolution of the JS language

Looking from the vantage point of webpack, here is the chronological list of approaches, techniques, best practices, and patterns that were added to the JS ecosystem, which led to the current state of things:

  • The script tag as the answer to adding interactivity to web pages
  • Immediately invoked function expressions as the answer to modularizing libraries and avoiding code collisions
  • The problem with IIFEs
  • Sharing third-party libraries in a team environment with NPM
  • JS task runners and NPM scripts
  • Modules in JS

Let's look at each one of these solutions in more detail.

The script tag

Initially, adding JS to your web page meant that you would need to add some script tags directly in your...

What is webpack?

Webpack is a module bundler for the web. Some people also refer to it as an asset compiler for web applications.

According to webpack's GitHub page:

"It packs many modules into a few bundled assets and so on. Modules can be CommonJs, AMD, ES6 modules, CSS, images, JSON, CoffeeScript, LESS, and so on, and your custom stuff."

Earlier in this chapter, in the section titled Working with modules in Node.js, we barely scratched the surface of how modules get exported and required in Node apps. What we did not mention is that there are all kinds of different module syntaxes that we can use. As already mentioned, Node.js works with the CommonJS module syntax. Besides CommonJS, there is also Asynchronous Module Definition (AMD). Alongside AMD, you can use ESM modules. With ESM modules, the syntax is a bit different from what we saw earlier.

Let's rewrite...

Adding a Vue project via NPM and using webpack with it

In this section, we'll build a new project with NPM, then add webpack to it, and finally add a Vue single file component to it.

First, let's make a new directory by taking the following steps. We'll call our project npm-vue-webpack:

  1. Open Git Bash and add a new folder as follows:
mkdir npm-vue-webpack && cd $_
  1. Initialize npm as follows:
npm init -y
  1. Next, install Vue and webpack into our new project as follows:
npm install vue webpack webpack-cli --save-dev --verbose

Once the NPM installation is complete, we can verify the folders and the contents of package.json as we did earlier in the chapter.

  1. Next, add the source and output folders our project will use as follows:
mkdir dist src
  1. Open our new project in VS Code as follows:
code .

Now, we can add two new files right from the VS Code editor...

Understanding Hot Module Replacement in Vue

HMR has become a sort of a buzzword in the past couple of years. What's the big deal? In this section, we'll discuss how HMR works.

To do that, we'll build another default simple app, just like we did in Chapter 1, Introducing Vue CLI 3, as follows:

vue create -d second-default-app

After a while, once it's done, we'll go into our app's directory as follows:

cd second-default-app

Let's open the project's folder in VS Code as follows:

code .

Now, we can see the entire contents of our second-default-project.

Now, we can serve the app as follows:

npm run serve

Of course, our app is now serving in our browser.

To view your app, visit localhost:8080 in your browser.

Let's look at HMR updates happening in real time.

...

Summary

In this chapter we discussed the evolution of the JS language and its ecosystem, and how this evolution lead to the appearance of module bundlers. We also looked at webpack, the module bundler of choice of Vue CLI 3.

We looked at how to plug in a very basic Vue-powered app, running on single file Vue templates. Alongside this mini-project, we also looked at a number of important webpack concepts. We finished the chapter by observing HMR on a Vue project.

Now that we know the very basics of how webpack works, in the chapters that follow, we'll discuss some other related technologies and we'll build on our knowledge of webpack and Vue CLI 3. The next topic we'll be closely examining is Babel.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • 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

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.

Who is this book 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.

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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : May 02, 2019
Length: 200 pages
Edition : 1st
Language : English
ISBN-13 : 9781789950342
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : May 02, 2019
Length: 200 pages
Edition : 1st
Language : English
ISBN-13 : 9781789950342
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just NZ$7 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just NZ$7 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total NZ$ 153.97
Vue.js 2 Design Patterns and Best Practices
NZ$71.99
Building Forms with Vue.js
NZ$32.99
Vue CLI 3 Quick Start Guide
NZ$48.99
Total NZ$ 153.97 Stars icon
Banner background image

Table of Contents

9 Chapters
Introducing Vue CLI 3 Chevron down icon Chevron up icon
Webpack in Vue CLI 3 Chevron down icon Chevron up icon
Babel in Vue CLI 3 Chevron down icon Chevron up icon
Testing in Vue CLI 3 Chevron down icon Chevron up icon
Vue CLI 3 and Routing Chevron down icon Chevron up icon
Using ESLint and Prettier in Vue CLI 3 Chevron down icon Chevron up icon
Improving CSS with SCSS Chevron down icon Chevron up icon
Deploying Vue CLI 3 Apps on GitHub Pages Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.