Nodejs+npm+vue environment configuration under "Front End" Ubuntu16

Source: Internet
Author: User
Tags aliases

I have been studying recently vue.js , but have always been in the runoob above various attempts. Today, the author in this machine (Ubuntu16.04) tried to deploy the Nodejs+npm+vue development environment, the next will be as detailed as possible to tell the installation process, to help the new couple to take a few detours .

Nodejs Installation

Speaking of the installation of Nodejs, the author looked at some of the information before the installation, there are probably so many ways:

    • Download the source code or the binary compression package to compile and install the website
    • apt-get/ yum Installation
    • nvmNodejs Version Manager installation

The author has tried each of the three, the result is as follows:

    • For the source code compiled installation, it seems that a considerable part of the online people are doing so. However, the result of the author in the native test is that the installation will Protocol error appear fans , and according to the error information consulted StackOverflow still no clue.
    • apt-getinstallation, seemingly easy
apt-get install nodejs-legacy

However, after such an installation, in the subsequent installation of NPM, the issue of version mismatch, was required by NPM to be forced to upgrade , but apt-get upgrade daily God pit, so abandoned the pit.

    • nvmInstallation. Speaking nvm of what, and ruby the corresponding rvm similar, all called Nodejs Version Manager, shorthand is nvm . This is a Nodejs version manager and this article describes how to install it .
NVM installation

The actual installation process is also not complicated.

First Usecurl

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

or usewget

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

And then run

source ~/.bashrc

Synchronize the system commands. And then check to see if it's installed properly.

nvm -v

If the version number is displayed correctly, the nvm installation is complete

Nodejs Installation

So let's take a look at nvm what's going on here.

nvm --help

The Help information displayed is as follows:

Node Version Managernote: <version> refers to any version-like string NVM understands. This includes:-Full or partial version numbers, starting with an optional "V" (0.10, v0.1.2, v1)-Default (built-in)                                Aliases:node, stable, unstable, iojs, system-custom aliases you define with ' NVM alias Foo ' USAGE:NVM--help Show This message nvm--version Print out the latest released version of NVM NVM install [-S] <version> Download and install a <version>, [-S] from source.  Uses. NVMRC if available--reinstall-packages-from=<version> when installing, reinstall packages installed in <node|iojs|node version number> nvm uninstall <version> Uninstall a version nvm use [--si Lent] <version> Modify PATH to use <version>. Uses. NVMRC if available NVM exec [--silent] <version> [<command>] Run <command> on <versiOn>. Uses. NVMRC if available NVM run [--silent] <version> [<args>] Run ' node ' on <version> with <arg s> as arguments.                                    Uses. NVMRC if available NVM current Display currently activated version NVM LS  List installed versions NVM LS <version> list versions matching a Given description NVM ls-remote List remote versions available for install NVM version < Version> Resolve The given description to a single local version NVM Version-remote <version&gt              ; Resolve the given description to a single remote version NVM deactivate Undo effects of ' NVM ' On current Shell NVM alias [<pattern>] Show all aliases beginning with <pattern> Nvm Ali As <name> <version> Set an alias named <name> pointing to <version&Gt NVM unalias <name> Deletes the alias named <name> NVM reinstall-packages &LT;VERSION&G          T                                Reinstall global ' NPM ' packages contained in <version> to current version NVM unload Unload ' NVM ' from the shell nvm which [<version>] Display path to installed node version.                          Uses. NVMRC If AVAILABLEEXAMPLE:NVM install v0.10.32 install a specific version number NVM use 0.10 Use the latest available 0.10.x release NVM run 0.10.32 app.js run app.js using nod E v0.10.32 NVM exec 0.10.32 node app.js Run ' node App.js ' with the PATH pointing to Node v0.10.32 NVM alias def Ault 0.10.32 Set Default node version on a shellnote:to remove, delete, or uninstall Nvm-just remove the ' $NVM _dir ' folder (usually ' ~/.NVM ')

As you can see, compare the main few:

    • nvm lsShow a list of installed nodejs versions (actually including usage)
    • nvm installInstall a new nodejs version
    • nvm useSwitch the current system nodejs version to the specified version
    • nvm alias defaultTo set a version to the default usage version

Next, we'll install the latest stable version.

nvm instal stable

We can use stable keywords to represent the latest stable version .

Next enable this version (when I write this article, the latest stable version is v9.11.1 that the version number varies from time to moment. before you do this, you can use to nvm ls see which versions are currently installed.

nvm use 9.11.1

Then test whether the configuration is correct

node -v

If the correct version number is displayed, it means everything is fine.

To facilitate quick use after the next boot, we can set this version as the default version

nvm alias default 9.11.1

In this way, the basic configuration is appropriate.

NPM Installation

Under normal circumstances, when nvm properly installed, the matching npm will be installed, you can use the following command to detect

npm -v

Similarly nvm , the normal display version number indicates that the installation is normal.

If you encounter problems, you can try stack overflow and other ways to resolve them. ( Note: After running the configuration process, NPM has been automatically installed in order to match the Nodejs version, which should normally be an automated process.) as the author did not encounter such a problem, so if a reader encountered such a problem can be tried to resolve and can hope to leave a message.

Vue Installation

All of the above are configured only, we can start vue the installation process. (Note: In this section, the author refers to the Runoob configuration textbook)

We can first installcnpm

npm install -g cnpm

When using NPM, pay attention to the following points:

    • Try not sudo to use, unless the file permissions are not enough (in fact, not enough permissions should be as far as possible by modifying the system permissions and other ways to resolve )
    • When installing the global package, be sure to remember to use the -g command, which indicates the global installation. if not added, it means to install the package for the app on the current path location .

Once the installation is complete, we can install it directly

cnpm install -g vuecnpm install -g vue-cli

We can check the next version after the installation is complete. vue

vue --version

If a normal version number appears, the configuration is correct.

The above is in the UBUNTU16 system from the zero-based configuration of the NODEJS+NPM+VUE environment, I hope to bring you some help.

Nodejs+npm+vue environment configuration under "Front End" Ubuntu16

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.