【前端】Ubuntu16下nodejs+npm+vue环境配置
笔者最近在学习vue.js
,不过一直都是在runoob上面各种尝试。今天笔者在本机(Ubuntu16.04)尝试部署了nodejs+npm+vue开发环境,接下来将尽可能详细的讲述安装过程,帮助新人少走一些弯路。
nodejs安装
说到nodejs的安装,笔者在安装之前查阅了一些资料,大概有这么几种路子:
- 官网下载源码或二进制压缩包进行编译安装
apt-get
/yum
安装nvm
nodejs版本管理器安装
笔者对这三个都进行了逐一尝试,结果如下:
- 对于源码编译安装,貌似网上有相当一部分人是这么做的。不过笔者在本机亲测的结果是,安装会出现迷之
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环境配置的更多相关文章
- windows系统下nodejs安装、环境配置及删除NPM全局配置
nodejs安装及设置NPM全局路径 删除NPM全局路径配置 一.nodejs安装及设置NPM全局路径 第一步:下载安装文件 下载nodejs,官网:http://nodejs.org/downloa ...
- win系统下nodejs安装及环境配置
第一步:下载安装文件下载nodejs,官网:http://nodejs.org/download/,我这里下载的是node-v0.10.28-x86.msi,如下图: 第二步:安装nodejs下载完成 ...
- 【前端工具】nodejs+npm+vue 安装(windows)
预备 先看看这几个是干嘛的,相互的关系是啥. nodejs是语言,类比到php. npm是个包管理,类比到composer. vue是个框架,类比到laravel. webpack是个打包工具. 先下 ...
- [转]win系统下nodejs安装及环境配置
本文转自:http://www.cnblogs.com/linjiqin/p/3765390.html 第一步:下载安装文件 下载nodejs,官网:http://nodejs.org/downloa ...
- vue环境配置脚手架环境搭建vue工程目录
首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd 输入node -v 检 ...
- vue环境配置 vue-cli脚手架
vue 环境配置步骤: 第一步: 在官网下载node,Node 下载地址 http://nodejs.cn/ 并安装node.检测node是否安装成功, 按 “windows+r” 进入cmd命令 ...
- ubuntu14.04下nodejs + npm + bower的安装、调试和部署
1. 简介 本文介绍ubuntu14.04下nodejs+npm+bower的安装.调试和部署 参考文档 https://docs.npmjs.com/getting-started https: ...
- Windows7+VS2012下OpenGL 4的环境配置
系统环境 Windows 7 Ultimate x64,Visual Studio Ultimate 2012 Update 4,和一块支持OpenGL 4.x的显卡. 准备工作 首先用GPU Cap ...
- LibOpenCM3(一) Linux下命令行开发环境配置
目录 LibOpenCM3(一) Linux下命令行开发环境配置 本文使用 Linux 环境, 硬件为 STM32F103 系列开发板 LibOpenCM3 介绍 LibOpenCM3 是GPL协议( ...
随机推荐
- MySQL_执行计划详细说明
1 简要说明 id 表格查询的顺序编号. 降序查看,id相同的从上到下查查看. id可以为null ,当table为( union ,m,n )类型的时候,id为null,这个时候,id的 ...
- [学习笔记] 模拟退火 (Simulated Annealing)
真没想到这东西真的在考场上用到了...顺便水篇blog以示诈尸好了(逃 模拟退火算法 模拟退火是一种随机化算法, 用于求函数的极值qwq 比如给出一个问题, 我们要求最优解的值, 但是可能的方案数量极 ...
- C语言第一次作业——输入输出格式
题目1温度转换 本题要求编写程序,计算华氏温度150°F对应的摄氏温度.计算公式:C=5×(F−32)/9,式中:C表示摄氏温度,F表示华氏温度,输出数据要求为整型. 1.实验代码 #include& ...
- 201621123062《java程序设计》第十周作业总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 思维导图: 2. 书面作业 本次PTA作业题集异常 2.1. 常用异常 结合题集题目7-1回答 2.1.1 自己以前 ...
- vue.js下载及安装配置
环境 Deepin15.4 下载及配置 node下载地址:http://nodejs.cn/download/ 解压到文件夹 /home/maskerk/vue/ 下 设置软连接: $ ln -s / ...
- 第一部分 linux系统命令
一.linux系统命令 pwd 当前目录位置 / 根目录 cd (change direcory) cd ..返回上一层目录 ls 显示当前目录下文件 ls -l 显示目录下详细文件信息 ls -lh ...
- JAVAGUI设计步骤
①创建容器 首先要创建一个GUI应用程序,需要创建一个用于容纳所有其它GUI组件元素的载体,Java中称为容器.典型的包括窗口(Window).框架(Frame/JFrame).对话框(Dialog/ ...
- Codechef March Challenge 2014——The Street
The Street Problem Code: STREETTA https://www.codechef.com/problems/STREETTA Submit Tweet All submis ...
- R语言基础2
----------------------------------R语言学习与科研应用,科研作图,数据统计挖掘分析,群:719954246-------------------------- 通常, ...
- 创建以mybatis为基础的web项目(1)
1. 新建项目,生成web.xml(生成的目录结构如下所示) 目录结构如下图 2. 导入mybatis包,数据库驱动包,log4j包(复制到webroot目录下的lib文件夹下面,并添加到构建路径) ...