Build an Online Shop with Vue

Tools

Tools

Yes, tooling does not get the job done, but it will get it done efficiently. From the code editor of choice to bundling engine, the right choice will always save you few hours and make you a better engineer.

Let's explore some of the tools!

Code Editors

Preferred

VS Code has excellent support for Vue. An interesting feature is that it supports Vue natively. So there is no need to use a plugin for .Vue extension syntax highlighting. Webstorm is as nice as VS Code but it's not a free tool.

VS CODE WEBSITE

There is a comprehensive course on Scotch that helps with everything you need to know about Vs Code.

TIP: If you'd love to use a nerdy font in your editor and cannot afford Operator, you could use Fira which has awesome ligatures:

Image of Fira in Atom

Sublime is also very popular and if you choose to use it, you can get started here

CLI Tool

Vue provides a CLI tool known as Vue-CLI. Rather than manually create starter folders and setup configurations, you can employ the Vue CLI tool which enables you to create Vue projects using different templates by executing CLI commands.

webpack

webpack is a code bundling tool that allows you to write organize assets (HTML, CSS, JS, Images) the way you prefer but bundles them into a single/multiple minified file(s). This improves performance because the files served to the browser are minified and improved.

WEBPACK WEBSITE

webpack automates this bundling process. Therefore, with your configuration done right (which the helpful Vue CLI does for you), you don't have to worry about the bundling process.

ESLint

JavaScript is a loosely typed language. This means a lot of syntaxes you expect to throw errors might be valid. The bad part is, some of those syntaxes might come back to bite you if not careful. A lint tool helps you abide by best practices by throwing errors when your code doesn't follow a set of rules.

ESLint is a lint tool that lints JavaScript code including ES2015.

More Tools

We just discussed the obvious tools that we will encounter while getting started. Along the line building our example app, we might encounter more. When we do, we will discuss what they are before using them.