【前端】Ubuntu16下nodejs+npm+vue环境配置
【前端】Ubuntu16下nodejs+npm+vue环境配置
笔者最近在学习vue.js，不过一直都是在runoob上面各种尝试。今天笔者在本机（Ubuntu16.04）尝试部署了nodejs+npm+vue开发环境，接下来将尽可能详细的讲述安装过程，帮助新人少走一些弯路。
nodejs安装
说到nodejs的安装，笔者在安装之前查阅了一些资料，大概有这么几种路子：
- 官网下载源码或二进制压缩包进行编译安装
apt-get/yum安装nvmnodejs版本管理器安装
笔者对这三个都进行了逐一尝试，结果如下：
- 对于源码编译安装，貌似网上有相当一部分人是这么做的。不过笔者在本机亲测的结果是，安装会出现迷之
Protocol error，而且根据错误信息查阅了stackoverflow后仍然毫无线索。 apt-get安装，看似容易
apt-get install nodejs-legacy但是这么一安装后，在后续安装npm的时候，出现版本不匹配的问题，被npm要求强制升级，然而apt-get的升级日常神坑，于是弃坑。
nvm安装。说到nvm是啥，和ruby对应的rvm类似，全称为Nodejs Version Manager，简写就是nvm。这是一个nodejs版本管理器，本文将介绍这一种安装方式。
nvm安装
实际安装过程也并不复杂。
首先使用curl
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash或使用wget
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash然后运行
source ~/.bashrc将系统命令进行同步。然后来检测下是否安装妥当
nvm -v如果正确显示了版本号，则说明nvm安装完毕
nodejs安装
那我们接下来先看一看nvm都有什么样的功能
nvm --help显示的帮助信息如下：
Node Version Manager
Note: <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 [--silent] <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 <args> 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> 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 alias <name> <version> Set an alias named <name> pointing to <version>
nvm unalias <name> Deletes the alias named <name>
nvm reinstall-packages <version> Reinstall global `npm` packages contained in <version> to current version
nvm unload Unload `nvm` from shell
nvm which [<version>] Display path to installed node version. Uses .nvmrc if available
Example:
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 node 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 default 0.10.32 Set default node version on a shell
Note:
to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)可以看到，比较主要的几个：
nvm ls展示已安装的nodejs版本列表（实际上还包括使用情况）nvm install安装新的nodejs版本nvm use将当前系统的nodejs版本切换到指定的版本nvm alias default将某个版本设置为默认使用版本
接下来我们来安装最新的稳定版本
nvm instal stable我们可以使用stable关键字，表示最新的稳定版本。
接下来启用这一版本（笔者写这篇文章的时候，最新稳定版本为v9.11.1，该版本号因时而异。在进行这一步之前可以先使用nvm ls查看目前已经安装了哪些版本）
nvm use 9.11.1然后测试下是否配置正确
node -v如果显示了正确的版本号，则表示一切正常。
为了方便下次开机后的快速使用，我们可以将这一版本设置为默认版本
nvm alias default 9.11.1这样一来，基本的配置就妥当了。
npm安装
正常情况下，当nvm正确安装后，与之匹配的npm也将安装完毕，可以使用如下命令检测下
npm -v类似于nvm，正常显示版本号则表示安装正常。
如果遇到问题，则可以尝试Stack Overflow等途径解决。（注：笔者在运行完之前的配置过程后，npm已经自动安装为了与nodejs版本匹配的版本，正常情况下这应该是一个自动的过程。由于笔者没有遇到这样的问题，所以如果有读者遇到了这样的问题可以尝试解决并可以的话希望进行留言）
vue安装
以上都配置妥当只有，我们就可以开始vue的安装过程了。（注：在这一部分，笔者参照的是runoob的配置教材）
我们可以首先安装cnpm
npm install -g cnpm在使用npm的时候注意以下几点：
- 尽量不要使用
sudo，除非出现文件权限不够的时候（实际上权限不够也应该尽量通过修改系统权限等方式解决） - 安装全局包的时候，一定要记得使用
-g命令，表示全局安装。如果不加的话意思是给当前路径位置上的app安装此包。
安装完毕后，我们可以直接进行安装
cnpm install -g vue
cnpm install -g vue-cli安装完毕后我们可以检查下vue版本
vue --version如果出现了正常的版本号，则说明配置正常。
以上就是在Ubuntu16系统内从零开始配置nodejs+npm+vue环境的方法，希望能给大家带来些帮助。