VueJS project

It is mostly about project management using package managers like yarn or npm which can be applied even to projects with another tech stack ( e.g React)
Inspired by Vue Mastery

Useful resources

VueJs Docs
For beginners Vue 3 Intro Course
git repo of Vue 3 Intro Course
VueJs in production ( highly recommended, but only 2 first lessons are avavailable for free, which is enough to know the project's structure) Real World Vue 3 Course
git repo of VueJs in production
Vue Router here
VueJs project deployment in heroku

Pre-installation

Please, install both.
PS: yarn is more flexible, but we are going to use both of them.
To install NODEJS and NPM/Yarn:
Instal nodejs
Instal yarn

Installation

    npm install -g @vue/cli

    yarn global add @vue/cli

Project setup

Run these commands

    git clone https://github.com/matin360/vuejs-test.git

    yarn install

Create new vuejs project

    vue create *project_name*

After running the command above

Select Vue 3
Select either Use Yarn (recommended) or Use NPM

Compiles and hot-reloads for development

    npm run serve

    yarn serve

Compiles and minifies for production

    yarn build

Lints and fixes files

    yarn lint

You might use this command as well, but add this to your config file first! (package.json -> "scripts")

    yarn lint --fix

Manage project

There 2 options to manage the project (import/install dependencis, create new projects, etc)

using terminal
using Vue UI tool (good for begginers). To do so, just run this:

    vue ui

Project Config

Go check package.json file that contains project configuration. You can modify it according to your preferences.
In "scripts" you can see what commands you can run ( e.g run, build, lint)

Customize configuration

See Configuration Reference.

Tools you can/have to use in your project

You will need this a lot :D

info about Eslint here
info about Babel here
info about Webpack here
info about Rollup here

Install extensions if you use VScode

Vetur - to work with vue files
es6-string-html - to use use HTML in js files

Resolve dependency issues

Sometimes you might have issues with dependencies which are located in node_modules. Terminal usually specifies which dependency is a problem ( e.g old version, absence, etc )

In case your project does not have a particular dependency, just add it to your config file package.json running this command:

    yarn add *depency_name*

then:

    yarn install

In case you are required to update dependencies, visit this link

Project Debugging

For debugging you can install dev tools on your browser.

For Vue 3 you should install Vue.js devtools beta version
For Vue 2 you can install Vue.js devtools legacy version