Starting a new Vue.js Project

A router guide to point one to the right links at the right time.

The vue documentation is fine, but they have some pitfalls I unfortunately fall for and some extra stuff that can be ignored if you already used vue on your machine before. Here are the steps to get the basic vue page up and served in like 15mins.

Photo by Fabian Irsara on Unsplash

Follow all of this page

https://cli.vuejs.org/guide/installation.html

First section of

https://cli.vuejs.org/guide/prototyping.html

‘Creating a Vue project’ Section from

— → ignore the vue ui stuff
— → REMINDER use Spacebar NOT Enter when selecting radio button options!!!
(can be changed in .json files later on, but get it right the first time round)

https://www.vuemastery.com/courses/real-world-vue-js/vue-cli/

Specifications I needed for my project (slightly different than above link):
for features

>Vue version, Babel, Router, Vuex, Linter/Formatter, Unit Testing
for vue version
>3.x
for history mode
>n
for linter
>Prettier
>lint on save
for unit testing
>Mocha and Chai
for config files use
>in package .json

After it is made,

go inside the vue application directory and serve the app locally on port 8080 with

npm run serve

or on a different port number (the first two dashes are strange but needed!)

npm run serve —- —-port 3333

And that should be everything to arrive on the starting page:

Other basic commands as mentioned in the README file:

Installing npm if you don't have it

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Unit tests

npm run test:unit

Linting

current setup from above should already lint it after you save the file, but you can manually lint again like this

npm run lint

Now you can start adding and changing components :)