Setting up a Vue.js project using vue cli

Hi Readers, In this article I will share detailed information on how you should setup a Vue.js projects using vue cli. Though it is pretty straightforward, I see many beginners struggling to have a proper project setup.

Prerequisite: You should have npm and node installed in your system (refer here )

To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:

1. Node.js 8.11+ installed.
2. npm

To install the CLI, run the following command in your terminal:

npm install --global @vue/cli

Once installed you can then open a terminal in the directory you want to create the project in, and then run vue create <your project name>. There are a few predefined ones, and you can make your own. These options let you configure things like Vuex, linting, vue-router, testing, and more.

Follow the steps below :-

1. In terminal, go to wherever you want to create a sample app and then run vue create <app-name>.
2. Use the arrow keys and enter to Select the “Manually Select Features” Option.
3. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that “Babel” and “Linter / Formatter” are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press Enter to proceed.
4. Next, you’ll select a config for the linter / formatter. Navigate to “Eslint with error prevention only” and hit Enter again. This will help us catch common errors.
5. Next, you are asked to configure what kind of automated linting we want. I prefer “Lint on commit” but if you are a beginner select “List on Save”. It will help you get better at development, as this will check for errors when we save a file inside the project. Hit Enter to continue.
6. Now, you will select how we want your config files to be managed. “In dedicated config files” will put your config settings for things like ESLint into their own, dedicated files. The other option, “In package.json”, will put all of your config settings into the app’s package.json file. Select "In dedicated config files" and push Enter.
7. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type y , otherwise type n.

Running the app locally:-

The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself.

In your terminal, try running npm run serve

That’s it you have successfully managed to setup a basic vue project and run it. Thanks for reading it till here, If you have any issues, Please let me know in the comments, I will try my best to resolve your issues.