【前端】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環境的方法，但願能給你們帶來些幫助。