Creating First Vue Project

By Kumar Manish Chaubey

In today’s IT industry when We start creating products after all information gathering and planning we come to which technology we really need to chose. From couple of years the JavaScript and it’s frameworks are taking a richest place in the technology stack. One of them is MEVN Stack.

MEVN Stack : MEVN is stack stands for MongoDB, Express, Vue and NodeJS. A complete package of full stack development. In this document I am going to start creating a project for Vue JS which is JavaScript framework for the front end applications.

For official Vue JS (version 3) documentation Click Here

Vue project can be created in various ways. For using cdn, local environment and using CLI. For our first project will be using CLI tools for creating Vue project.

Note : Vue cli can be installed through npm or yarn. Please make sure NodeJS environment is already setup. For official Vue CLI documentation Click Here

Installation

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Check if Vue CLI is installed using : vue --version

@vue/cli 4.5.12

Start New Project

vue create <project-name>

Couple of question will be asked before creating project

I will be going with Manual select features

Note if you are selecting Manual Select Features then there will be couple of features that you can select by your own but for beginner I will recommend to go with Default for Vue 3 or Vue 2.

Select advance features, TS Router, Vuex, Linter

After this you will get couple of question and then ask to save this as preset for future project so you will need to confirm next time only.

Questions and selected options before project is about to create

Now the project is created and we can run the project

cd <project-folder-name>

npm run serve

Vue project is running on port 8080

Tada :) And now the first vue project is created. :)

When we have too deploy the project we will need to create production build using command, npm run build

First look of Vue project with zero coding

Thank You for reading this article and if it is useful then comment so I will create series of vueJS article for project in deep dive.

VS Code Editor Extensions : VS Code editor extensions for VueJS project development. Those are based on my experience but please recommend better extensions if you found.

https://marketplace.visualstudio.com/items?itemName=octref.vetur

https://marketplace.visualstudio.com/items?itemName=jcbuisson.vue

https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets