Project Setup with Vue.js

If you are using Vue.js for the very first time, we can start by installing Vue CLI. Vue CLI is a standard tooling for Vue.js development.

Overview | Vue CLI

In your terminal, you can install by:

npm install -g @vue/cli

-g means global, which means you want to install Vue CLI on your whole device, not only in the specific location. Once you installed it, you can always create a new Vue project by:

vue create my-project

my-project is for your project’s name. Once you enter the command, you will be prompted to pick a preset. You can choose default setting or manually pick features. Here, I chose to manually pick features as I wanted to install Router, Vuex, Sass (Css Pre-processors), and Formatter.

This was especially helpful to me with installing Sass. I tried installing node-sass and sass-loader separately in my previous projects, but it kept giving me a compilation error, which seemed to be caused by the higher version of sass-loader. I downgraded it, and tried other options too but couldn’t solve the problem. Then, I tried selecting the features on the preset and it worked perfectly fine. It seemed to automatically pick the lower version that does not cause such error.

“devDependencies”: {
“@vue/cli-plugin-babel”: “~4.5.0”,
“@vue/cli-plugin-eslint”: “~4.5.0”,
“@vue/cli-plugin-router”: “~4.5.0”,
“@vue/cli-plugin-vuex”: “~4.5.0”,
“@vue/cli-service”: “~4.5.0”,
“@vue/compiler-sfc”: “3.0.0”,
“@vue/eslint-config-prettier”: “6.0.0”,
“babel-eslint”: “10.1.0”,
“eslint”: “6.7.2”,
“eslint-plugin-prettier”: “3.3.1”,
“eslint-plugin-vue”: “7.0.0”,
“node-sass”: “4.12.0”,
“prettier”: “2.2.1”,
“sass-loader”: “8.0.2”
},

After installing and creating a new project, you can run the app by:

npm run serve

You can also use the GUI where you can manage your projects on a graphical interface:

vue ui