HugeServer Knowledgebase

How to install Vue.JS for Development on CentOS 7

Introduction

Vue.JS is a JavaScript progressive front-end framework for building User Interfaces (UI). Vue is a monolithic framework and designed to be incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects, Also Vue.JS is perfectly capable of developing complicated Single-Page Applications (SPA).
Vue was created by Evan You after working for Google using AngularJS in a number of projects. He later summed up his thought process and start creating his own framework, Vue was originally released in February 2014.

Vue.JS Logo

Install Node.JS

First of all, we need to install Node.JS and NPM to be able to serve and start our Vue project. The latest stable version of Node.JS is “8.9.4 LTS” at the time of writing this tutorial:

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -

After adding the official repository you can easily install Node.js and NPM with the following command:

yum install nodejs

You can check and verify your Node.js and NPM that you have installed using the following commands:

node -v

npm -v

Install Vue.JS

You can install Vue.js using its official CLI, so we have to install the CLI using NPM:

npm install -g vue-cli

Now you can switch to a directory where you want to store your project, and then install Vue.js files with the command below:

vue init webpack your-project

Switch to your project directory to install dependencies:

cd your-project

npm install

Now you have installed Vue.JS completely and you can start developing and testing it right away, executing the following command will start serving your project in a development environment to test around:

npm run dev

You can see that your project is now running on:

http://localhost:8081

 
You can check out Vue.JS official website for more information and news!

Was this tutorial helpful?

Thank you for your vote.Thank you for your vote.

Similar Posts

4 thoughts on “How to install Vue.JS for Development on CentOS 7”

  1. Fantastic post! Thanks for sharing lovely content.
    I would like to recommanded for this particulate blog

  2. How can we not run this only on local host? I can’t access it from my PC because I’m running this on a remote server.

    1. Hi,
      I have the same puzzle with you.
      How do you resolve the issue.
      I am also run it on remote server.

      Thanks,
      Linqingzuan

  3. thank you so much for sharing this.
    Can you please help me in this issue I am having:
    When I tried running this command: vue init webpack your-project
    the error 183 appeared.

    [eb@localhost ~]$ sudo vue init webpack /var/www/bsmdmn.com/public_html
    [sudo] password for eb:

    ? Target directory exists. Continue? Yes
    ? Project name itcproject
    ? Project description A Vue.js project
    ? Author Ebtisam
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests Yes
    ? Pick a test runner jest
    ? Setup e2e tests with Nightwatch? Yes
    ? Should we run `npm install` for you after the project has been created? (recommended)
    npm

    vue-cli · Generated “/var/www/bsmdmn.com/public_html”.

    # Installing project dependencies …
    # ========================

    events.js:183
    throw er; // Unhandled ‘error’ event
    ^

    Error: spawn /bin/sh ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
    at onErrorNT (internal/child_process.js:362:16)
    at _combinedTickCallback (internal/process/next_tick.js:139:11)
    at process._tickCallback (internal/process/next_tick.js:181:9)
    [eb@localhost ~]$ npm install @ionic/app-scripts@3.1.6 –save -dev
    npm WARN install Usage of the `–dev` option is deprecated. Use `–only=dev` instead.
    npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

    > node-sass@4.5.3 install /home/eb/node_modules/node-sass
    > node scripts/install.js

    Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.3/linux-x64-57_binding.node
    Download complete ] – :
    Binary saved to /home/eb/node_modules/node-sass/vendor/linux-x64-57/binding.node
    Caching binary to /home/eb/.npm/node-sass/4.5.3/linux-x64-57_binding.node

    > uglifyjs-webpack-plugin@0.4.6 postinstall /home/eb/node_modules/uglifyjs-webpack-plugin
    > node lib/post_install.js

    > node-sass@4.5.3 postinstall /home/eb/node_modules/node-sass
    > node scripts/build.js

    Binary found at /home/eb/node_modules/node-sass/vendor/linux-x64-57/binding.node
    Testing binary
    Binary is fine
    npm WARN saveError ENOENT: no such file or directory, open ‘/home/eb/package.json’
    npm WARN enoent ENOENT: no such file or directory, open ‘/home/eb/package.json’
    npm WARN eb No description
    npm WARN eb No repository field.
    npm WARN eb No README data
    npm WARN eb No license field.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”linux”,”arch”:”x64″})

    + @ionic/app-scripts@3.1.6
    added 650 packages from 611 contributors and audited 4988 packages in 164.218s
    found 0 vulnerabilities

    What could be the problem?

Leave a Reply to Adam J Hopkins Cancel reply

Your email address will not be published. Required fields are marked *

*