Ways To Install Vue Js On Linux

Posted By : Ranjan Mondal | 20-May-2018

For building large scale application of vue js, npm is highly recommended. It mixes judiciously with module bundlers such as Webpack or Browersify.

Vue provides an official cli for creating Single Page Apps very quickly. It provides rich modules to setup workflow for projects. You can quickly run your project with hot-reload, lint-on-save, and prod-ready builds

Step 1: to Install vue js.

      sudo npm install -g @vue/cli
     [sudo] password for system:  ******* 
     
     /usr/local/bin/vue -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js
    + @vue/[email protected]
    added 376 packages in 30.234s

It will install vue js globally on your system.

Step 2: Go inside the directory, where you want to create your project folder.

      system@system:~/Documents/projects/vue$ vue init webpack trader

Here web pack is a command that installs web pack tool in your project.
It helps run and build your project. It transpiles your code using babel.

If it fails, then run the command below.

     sudo npm install -g @vue/cli-init

Above command add vue init as global to be installed.

After that run above command once again, this time it installs successfully.

     vue init webpack

It will ask the following question during installation of your project.

       Project name  ?  
 Project description ?  
 Author ?  
 Vue build ? 
 Install vue-router ? 
 Use ESLint to lint your code ? 
 Pick an ESLint preset Standard ?

Step 3: Don't panic on the error which is showing on your system.

Go to the directory by cd <project name which you have specified>

Run the following command

     sudo npm install

It will install all the dependencies and your project ready to run.

Step 4: To run your project on development mode

     npm run dev

Step 5: To build your project.

     npm run build

You can also use vue devtools for Chrome and Firefox.
Go to the following link.
https://github.com/vuejs/vue-devtools#vue-devtools

Run your project and Click On Vue icon on right side of the browser and open development tools. It is a handy tool for knowing what is happening under the shell.