A Vue App Quick Start Guide

Ben Dunn
3 min readSep 27, 2020

Sometimes you just want to get up and go right? If you already know the basics of a frontend framework, a good starter tutorial will ideally show you how to set up a boilerplate and leave the rest to you and your relevant docs. So let’s do that for Vue!

Wow! What an easy intuitive command. From here you’ll be thrown to a really slick CLI interface to choose your presets. Anyone coming from React will immediately note that this looks and feels substantially better than creating a new React app.

Choosing default will get you up and running the quickest, but since all good programmers love control, we’re going to go through the manual selection options.

Lots of choices! You select by pressing space, and complete your selection process by hitting enter. I know it says that, but let’s face it, you’re not reading that and it’s not instantly intuitive. Babel is your JS compiler, so you want that. You can choose Typescript if you want to make your life harder (or if you have a larger project in mind and want to make debugging easier). PWA if you need this to look good on mobile, definitely grab that Router to make your navigation easier (gives you the ever useful router, obviously) and Vuex if you want to make state management easier (the store comes with Vuex, if you’ve used Redux with React, you already know). CSS pre-processors are great if you want some bonus content in your CSS. You’ll see the linter is already chosen by default, for good reason. Leave it and be happier. Lastly, you can choose your testing style if you so choose.

Your next prompt will offer the option to use the current version of Vue or to preview a new version. For now, go ahead with the current version. After that, you’ll be prompted to choose a linter, which I think you can handle without another screenshot. There’s no wrong answer here, and like everything in programming, you can always go back. Next, you can lint on save or not, again, no wrong answers. Then choose a place for the config business; I usually choose package.json.

See, that wasn’t so hard was it? You should be asked to cd into your project and then run it! Open the project up in your favorite text editor and get started with your new Vue app!

--

--