Vue Daily: pos

Create a POS System in Vue.js - Part 3

Tuesday, December 22, 2015

In the previous post, we reorganized our code into components. This allows us to reuse code only pieces of our code. However, our index.html and app.js files had a bunch of extra code in them that would require us to sort through the next time we wanted to use the code in another project. There has to be a better way to organize this code, right? Well of course there is, or this would be the lamest blog post ever.

The solution is to move our code into subdirectories, each containing a component. Then we can use Browserify to bring it all together. My preferred method is to use Gulp with Browserify. So I will show you how to set it up.

pos

Create a POS System in Vue.js - Part 2

Monday, December 21, 2015

In the previous post, we created a simple Point of Sale system. However, the code only uses one Vue instance and no compnents.

There is no sense of encapsulation in the code. The main Vue instance is responsible for doing everything. We should move some of these pieces into their own components so that each one can be responsible for itself and use the parent to share state between child components instead. Also, since this is already a working “product,” this should require alot of copy-and-pasting with some extra additions.

pos

Create a POS System in Vue.js - Part 1

Friday, December 18, 2015

So let’s get started. First, pull down the code from the repo for this series. Then we will check out the beginning code. Lastly, let’s bring in all the dependencies. I have gone ahead and provided apackage.json file that has some of the things we need. I recommend running a local server while going through these tutorials. There are a few options. You can run a local python server using python -m SimpleHTTPServer. My preferred method is to use the http-server npm package.

Once the server is running, view the page in the browser at http://localhost:8000. This is just the basic UI we will be working with. The items on the right are the items that can be added to a transaction. The transaction information is on the left. It shows the items already added to the transaction, their amounts and totals, and then the subtotal, tax, and total of the whole transaction. Let’s start making this thing function like a real POS system.

pos

Create a POS System in Vue.js - Introduction

Thursday, December 17, 2015

If you don’t know what Vue.js is by now, then you have to check it out! In case you haven’t heard of it, here is how Vue.js describes itself on its website:

Vue.js is a library for building modern web interfaces. It provides data-reactive components with a simple and flexible API.

That isn’t very specific. Vue.js is a view library that updates the physical DOM based on state managed in JavaScript. You manipulate the state and the webpage will update to reflect the changes. Pretty cool, huh? It’s similar to React and can be thought of as a stripped down version of AngularJS.

Older
Stories

Create a POS System in Vue.js - Part 3

Create a POS System in Vue.js - Part 2

Create a POS System in Vue.js - Part 1

Create a POS System in Vue.js - Introduction

Tags

recent posts

Archive