笔者最近在学习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环境的方法,希望能给大家带来些帮助。

【前端】Ubuntu16下nodejs+npm+vue环境配置的更多相关文章

  1. windows系统下nodejs安装、环境配置及删除NPM全局配置

    nodejs安装及设置NPM全局路径 删除NPM全局路径配置 一.nodejs安装及设置NPM全局路径 第一步:下载安装文件 下载nodejs,官网:http://nodejs.org/downloa ...

  2. win系统下nodejs安装及环境配置

    第一步:下载安装文件下载nodejs,官网:http://nodejs.org/download/,我这里下载的是node-v0.10.28-x86.msi,如下图: 第二步:安装nodejs下载完成 ...

  3. 【前端工具】nodejs+npm+vue 安装(windows)

    预备 先看看这几个是干嘛的,相互的关系是啥. nodejs是语言,类比到php. npm是个包管理,类比到composer. vue是个框架,类比到laravel. webpack是个打包工具. 先下 ...

  4. [转]win系统下nodejs安装及环境配置

    本文转自:http://www.cnblogs.com/linjiqin/p/3765390.html 第一步:下载安装文件 下载nodejs,官网:http://nodejs.org/downloa ...

  5. vue环境配置脚手架环境搭建vue工程目录

    首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd  输入node -v  检 ...

  6. vue环境配置 vue-cli脚手架

    vue 环境配置步骤: 第一步: 在官网下载node,Node  下载地址 http://nodejs.cn/ 并安装node.检测node是否安装成功, 按 “windows+r”  进入cmd命令 ...

  7. ubuntu14.04下nodejs + npm + bower的安装、调试和部署

      1. 简介 本文介绍ubuntu14.04下nodejs+npm+bower的安装.调试和部署 参考文档 https://docs.npmjs.com/getting-started https: ...

  8. Windows7+VS2012下OpenGL 4的环境配置

    系统环境 Windows 7 Ultimate x64,Visual Studio Ultimate 2012 Update 4,和一块支持OpenGL 4.x的显卡. 准备工作 首先用GPU Cap ...

  9. LibOpenCM3(一) Linux下命令行开发环境配置

    目录 LibOpenCM3(一) Linux下命令行开发环境配置 本文使用 Linux 环境, 硬件为 STM32F103 系列开发板 LibOpenCM3 介绍 LibOpenCM3 是GPL协议( ...

随机推荐

  1. MySQL_执行计划详细说明

          1 简要说明 id 表格查询的顺序编号. 降序查看,id相同的从上到下查查看. id可以为null ,当table为( union ,m,n )类型的时候,id为null,这个时候,id的 ...

  2. [学习笔记] 模拟退火 (Simulated Annealing)

    真没想到这东西真的在考场上用到了...顺便水篇blog以示诈尸好了(逃 模拟退火算法 模拟退火是一种随机化算法, 用于求函数的极值qwq 比如给出一个问题, 我们要求最优解的值, 但是可能的方案数量极 ...

  3. C语言第一次作业——输入输出格式

    题目1温度转换 本题要求编写程序,计算华氏温度150°F对应的摄氏温度.计算公式:C=5×(F−32)/9,式中:C表示摄氏温度,F表示华氏温度,输出数据要求为整型. 1.实验代码 #include& ...

  4. 201621123062《java程序设计》第十周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 思维导图: 2. 书面作业 本次PTA作业题集异常 2.1. 常用异常 结合题集题目7-1回答 2.1.1 自己以前 ...

  5. vue.js下载及安装配置

    环境 Deepin15.4 下载及配置 node下载地址:http://nodejs.cn/download/ 解压到文件夹 /home/maskerk/vue/ 下 设置软连接: $ ln -s / ...

  6. 第一部分 linux系统命令

    一.linux系统命令 pwd 当前目录位置 / 根目录 cd (change direcory) cd ..返回上一层目录 ls 显示当前目录下文件 ls -l 显示目录下详细文件信息 ls -lh ...

  7. JAVAGUI设计步骤

    ①创建容器 首先要创建一个GUI应用程序,需要创建一个用于容纳所有其它GUI组件元素的载体,Java中称为容器.典型的包括窗口(Window).框架(Frame/JFrame).对话框(Dialog/ ...

  8. Codechef March Challenge 2014——The Street

    The Street Problem Code: STREETTA https://www.codechef.com/problems/STREETTA Submit Tweet All submis ...

  9. R语言基础2

    ----------------------------------R语言学习与科研应用,科研作图,数据统计挖掘分析,群:719954246-------------------------- 通常, ...

  10. 创建以mybatis为基础的web项目(1)

    1. 新建项目,生成web.xml(生成的目录结构如下所示) 目录结构如下图 2. 导入mybatis包,数据库驱动包,log4j包(复制到webroot目录下的lib文件夹下面,并添加到构建路径) ...