Getting started with Vue.js application development

By: (plus.google.com) +David Herron; Date: July 20, 2018

Tags: Vue.js » JavaScript

Vue.js is an exciting new framework for developing front-end JavaScript applications. It promises to be a "Progressive" web framework, and I don't think they mean in a Political sense but means that Vue.js can be plugged into the part of an application which requires a richer experience. It is also supposed to be Approachable, works directly from HTML, CSS and JavaScript, while being Versatile and Performant. In this example we'll build a starter application, and embed it into an HTML web page. Specifically, this web page.

The easiest way to start with Vue.js is to dive right into Single File Templates, and to use the Vue CLI to assist with scaffolding. A Single File Template lets you build a Vue Component all in one file. Don't worry if you don't know yet what a Vue Component is, trust me that it's easier to build them as a single file.

Installing tools

To install Vue CLI - you must first have Node.js installed on your computer. We won't be writing any Node.js code, but the Vue CLI is implemented with Node.js and therefore requires that Node.js is installed on your computer.

If you don't already have Node.js go to (nodejs.org) https://nodejs.org/en/ and download the installer shown there.

If you prefer Node.js to be installed using a package manager: (nodejs.org) https://nodejs.org/en/download/package-manager/

Once you've done this, type in the command:

$ sudo npm install -g vue-cli

You won't require sudo on every computer. After running this you have a new command, vue where the primary purpose is to download application skeletons. The list of official application skeletons is available by typing vue list. Other skeletons can be downloaded beyond the set listed by that command.

Setup of skeleton example application

For this example we'll simply set up the default application which supports developing applications using Single File Templates. To get started type the command:

$ vue init webpack-simple example-1
These are the files we're given

The file App.vue is the Single File Template which will make up the application. It is easy to create other Vue Components and bring them into such a file.

The file main.js is the JavaScript executed by running this application.

The file index.html is the HTML for a container to execute the application.

The file package.json is required for bringing in packages from the Node.js ecosystem required for building the code. We won't need to touch anything here. It also contains the build process.

The file webpack.config.js contains the configuration for Webpack that is used in building the code.

Kicking tires

The output instructs you to:

$ cd example-1
$ npm install
$ npm run dev

You'll notice the commands start with npm. This means we're using npm to drive the processes, and those processes are defined in package.json.

After we do this the web browser will automatically open up to this:

Example 1 compiled and running

The screen for this is defined in App.vue. Open that file in your favorite programming editor. We're not going to go too deep into this, fortunately it's fairly straightforward.

The <template> section describes the HTML of the UI. Comparing it with what's in the browser will be instructive.

The <script> section contains JavaScript which implements the interactivity. You'll notice in the template a thing - {{ msg }} - and in the script a section marked data containing a definition for msg. This is a core competency of Vue.js, to have data items automatically managed and then appear magically into the template.

The <style> section contains the CSS for the application.

While you have npm run dev active you can modify App.vue and Vue.js will automatically reload it in the browser. Very cool.

Embedding this on a web page.

The next thing we'll do is demonstrate deploying this sample Vue.js app to a website. The app is kind of useless unless it can be used on a website.

In the Vue.js documentation we're told we can put this into an HTML page and the whole world of Vue.js is available:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

That's nice, but we're going to do something different.

In addition to npm run dev we can use npm run build to generate a built version of the application.

$ npm run build

> example-1@1.0.0 build /Volumes/Extra/ws/techsparx.com/vue-js-examples/example-1
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 25ea0beedf90a14bba0e                                                           
Version: webpack 3.12.0
Time: 14986ms
                                    Asset     Size  Chunks             Chunk Names
logo.png?82b9c7a5a3f405032b1db71a25f67021  6.85 kB          [emitted]  
                                 build.js  99.2 kB       0  [emitted]  main
                             build.js.map   835 kB       0  [emitted]  main
Example 1 built and ready to deploy

This gives us a few new files with the dist directory being what's required for deployment. Thanks to everything else it is packaged, minified, and ready to go.

We aren't ready to deploy yet, as we need to do the work to embed this in a web page.

Study index.html and you'll see it doesn't contain much special. This is where we focus:

<div id="app"></div>
<script src="/dist/build.js"></script>

Then in main.js we have this:

new Vue({
  el: '#app',
  render: h => h(App)
})

What happens is that the el: value is a CSS selector to the DOM location where the application will be mounted. In this example we have a div with the ID of app, and as configured Vue.js will attach the application to that div.

It's rather likely we'll need to attach the application to another location in the DOM - a div of some other name.

Suppose you're required to mount the application here:

<div id="app-example-01"></div>

Change main.js to

new Vue({
  el: '#app-example-01',
  render: h => h(App)
})

And make a corresponding change in index.html.

The other change that will be required is to modify the script tag. It's very likely you'll be required to deploy the build.js to a different location than /dist/build.js.

In webpack.config.js make this change:

publicPath: '/software-development/vue-js/getting-started/vue-js/',

Then in your deployed HTML page, add this code:

<div id="app-example-01"></div>
<script src="/software-development/vue-js/getting-started/vue-js/build.js"></script>

Then finally in App.vue change the <script> tag to this:

<style scoped>

The scoped keyword performs some CSS magic so that CSS declarations are corralled to affect only the application.

Now you can run npm run build.

And you'll get something like this:

Links

Vue.js home page: (vuejs.org) https://vuejs.org/

Vue.js Guide: (vuejs.org) https://vuejs.org/v2/guide/

Vue.js API: (vuejs.org) https://vuejs.org/v2/api/

Vue.js examples: (vuejs.org) https://vuejs.org/v2/examples/

Vue CLI: (www.npmjs.com) https://www.npmjs.com/package/vue-cli

« Example phishing attempt - bogus try at grabbing $10,000 in BTC Second trailer to Doctor Who 2018 season, first step beyond 'Brilliant' »
2016 Election Acer C720 Ad block AkashaCMS Amazon Amazon Kindle Amazon Web Services America Amiga and Jon Pertwee Android Anti-Fascism AntiVirus Software Apple Apple Hardware History Apple iPhone Apple iPhone Hardware April 1st Arduino ARM Compilation Artificial Intelligence Astronomy Astrophotography Asynchronous Programming Authoritarianism Automated Social Posting AWS DynamoDB AWS Lambda Ayo.JS Bells Law Big Brother Big Finish Bitcoin Mining Black Holes Blade Runner Blockchain Blogger Blogging Books Botnets Cassette Tapes Cellphones China China Manufacturing Christopher Eccleston Chrome Chrome Apps Chromebook Chromebox ChromeOS CIA CitiCards Citizen Journalism Civil Liberties Clinton Cluster Computing Command Line Tools Comment Systems Computer Accessories Computer Hardware Computer Repair Computers Cross Compilation Crouton Cryptocurrency Curiosity Rover Currencies Cyber Security Cybermen Daleks Darth Vader Data backup Data Storage Database Database Backup Databases David Tenant DDoS Botnet Detect Adblocker Developers Editors Digital Photography Diskless Booting Disqus DIY DIY Repair DNP3 Do it yourself Docker Docker MAMP Docker Swarm Doctor Who Doctor Who Paradox Doctor Who Review Drobo Drupal Drupal Themes DVD E-Books E-Readers Early Computers Election Hacks Electric Bicycles Electric Vehicles Electron Emdebian Encabulators Energy Efficiency Enterprise Node EPUB ESP8266 Ethical Curation Eurovision Event Driven Asynchronous Express Face Recognition Facebook Fake News Fedora VirtualBox File transfer without iTunes FireFly Flickr Fraud Freedom of Speech Front-end Development Gallifrey git Github GitKraken Gitlab GMAIL Google Google Chrome Google Gnome Google+ Government Spying Great Britain Heat Loss Hibernate Hoax Science Home Automation HTTP Security HTTPS Human ID I2C Protocol Image Analysis Image Conversion Image Processing ImageMagick In-memory Computing InfluxDB Infrared Thermometers Insulation Internet Internet Advertising Internet Law Internet of Things Internet Policy Internet Privacy iOS Devices iPad iPhone iPhone hacking Iron Man iTunes Java JavaScript JavaScript Injection JDBC John Simms Journalism Joyent Kaspersky Labs Kindle Kindle Marketplace Lets Encrypt LibreOffice Linux Linux Hints Linux Single Board Computers Logging Mac Mini Mac OS Mac OS X Machine Learning Machine Readable ID macOS MacOS X setup Make Money Online March For Our Lives MariaDB Mars Mass Violence Matt Lucas MEADS Anti-Missile Mercurial MERN Stack Michele Gomez Micro Apartments Microsoft Military AI Military Hardware Minification Minimized CSS Minimized HTML Minimized JavaScript Missy Mobile Applications Mobile Computers MODBUS Mondas Monetary System MongoDB Mongoose Monty Python MQTT Music Player Music Streaming MySQL NanoPi Nardole NASA Net Neutrality Network Attached Storage Node Web Development Node.js Node.js Database Node.js Testing Node.JS Web Development Node.x North Korea npm NVIDIA NY Times Online advertising Online Community Online Fraud Online Journalism Online Photography Online Video Open Media Vault Open Source Open Source Governance Open Source Licenses Open Source Software OpenAPI OpenVPN Palmtop PDA Patrick Troughton Paywalls Personal Flight Peter Capaldi Phishing Photography PHP Plex Plex Media Server Political Protest Postal Service Power Control Privacy Production use Public Violence Raspberry Pi Raspberry Pi 3 Raspberry Pi Zero ReactJS Recaptcha Recycling Refurbished Computers Remote Desktop Removable Storage Republicans Retro Computing Retro-Technology Reviews RFID Right to Repair River Song Robotics Rocket Ships RSS News Readers rsync Russia Russia Troll Factory Russian Hacking Rust SCADA Scheme Science Fiction SD Cards Search Engine Ranking Season 1 Season 10 Season 11 Security Security Cameras Server-side JavaScript Serverless Framework Servers Shell Scripts Silence Simsimi Skype SmugMug Social Media Social Media Warfare Social Network Management Social Networks Software Development Space Flight Space Ship Reuse Space Ships SpaceX Spear Phishing Spring Spring Boot Spy Satellites SQLite3 SSD Drives SSD upgrade SSH SSH Key SSL Stand For Truth Strange Parts Swagger Synchronizing Files Telescopes Terrorism The Cybermen The Daleks The Master Time-Series Database Tom Baker Torchwood Total Information Awareness Trump Trump Administration Trump Campaign Twitter Ubuntu Udemy UDOO US Department of Defense Virtual Private Networks VirtualBox VLC VNC VOIP Vue.js Web Applications Web Developer Resources Web Development Web Development Tools Web Marketing Webpack Website Advertising Weeping Angels WhatsApp William Hartnell Window Insulation Windows Windows Alternatives Wordpress World Wide Web Yahoo YouTube YouTube Monetization