CentOS Linux release 7.3.1611安装vue.js包含npm和cnpm详细教程

前端之家收集整理的这篇文章主要介绍了CentOS Linux release 7.3.1611安装vue.js包含npm和cnpm详细教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_404_0@最近在弄linux系统的环境,搭建vue环境,由于是第一次接触vue以前也没使用过,所以才搭建环境的时候还是挺闷逼的。记录一下,免得以后忘记了。

安装cnpm
@H_404_0@由于不知道vue和npm的关系,所以自己想先安装npm并设置成阿里的cnpm镜像,然后再安装vue。想想也是醉了!npm是vue管理jar包的工具。vue是自带npm的。所以你在安装玩vue之后才会有npm。于是下面的报错成了第一个!!!!!

@H_404_0@[root@iZwz9iy3ddbpjZ ~]# npm install -g cnpm --registry=https://registry.npm.taobao.org
-bash: npm: command not found

安装nodejs
@H_404_0@首先使用命令yum install epel-release安装。

@H_404_0@为什么使用这个命令请看:http://blog.csdn.net/yasi_xi/article/details/11746255说的很详细也很好。

@H_404_0@然后使用命令yum install nodejs。报错如下:

@H_404_0@[root@nodejs ~]# yum install nodejs

@H_404_0@Loaded plugins: fastestmirror

@H_404_0@Repository base is listed more than once in the configuration

@H_404_0@Repository updates is listed more than once in the configuration

@H_404_0@Repository extras is listed more than once in the configuration

@H_404_0@Repository centosplus is listed more than once in the configuration

@H_404_0@Loading mirror speeds from cached hostfile

@H_404_0@原因是http://m.blog.csdn.net/u012251305/article/details/77345766

@H_404_0@解决方法rpm -ivh https://kojipkgs.fedoraproject.org//packages/http-parser/2.7.1/3.el7/x86_64/http-parser--el7.x86_64.rpm && yum -y install nodejs

@H_404_0@命令执行结果:

@H_404_0@[root@iZwz9iy3ddbp ~]# rpm -ivh https://kojipkgs.fedoraproject.org//packages/http-parser/2.7.1/3.el7/x86_64/http-parser-2.7.1-3.el7.x86_64.rpm && yum -y install nodejs
Retrieving https://kojipkgs.fedoraproject.org//packages/http-parser/2.7.1/3.el7/x86_64/http-parser-2.7.1-3.el7.x86_64.rpm
Preparing... ################################# [100%]
Updating / installing...
1:http-parser-2.7.1-3.el7 ################################# [100%]

@H_404_0@信息太多不一一贴出来了!

@H_404_0@查看node版本:命令

@H_404_0@[root@iZwz9iy3ddbp ~]# node -v
v6.11.1

@H_404_0@查看npm版本命令:

@H_404_0@[root@iZwz9iy3ddbp ~]# npm -v
3.10.10

@H_404_0@安装cnpm命令:

@H_404_0@[root@iZwz9iy3ddbp~]# npm install -g cnpm --registry=https://registry.npm.taobao.org 命令执行结果如下:

@H_404_0@[root@iZwz9iy3ddbp4396q2tpwjZ ~]# npm install -g cnpm --registry=https://registry.npm.taobao.org
/usr/bin/cnpm -> /usr/lib/node_modules/cnpm/bin/cnpm
/usr/lib
└─┬ cnpm@5.1.1
├── auto-correct@1.0.0
├── bagpipe@0.3.5
├── colors@1.1.2
├─┬ commander@2.10.0
│ └── graceful-readlink@1.0.1
├─┬ cross-spawn@0.2.9
│ └── lru-cache@2.7.3
├─┬ debug@2.6.8
│ └── ms@2.0.0
├── giturl@1.0.0
├── ini@1.3.4

@H_404_0@信息太多不一一贴出来了!

更换npm源
@H_404_0@npm configset registry https://registry.npm.taobao.org

@H_404_0@
// 配置后可通过下面方式来验证是否成功

@H_404_0@
get registry

@H_404_0@// 或

@H_404_0@npm info express

@H_404_0@查看更换结果:

@H_404_0@[root@iZwz9iy3ddbp ~]# npm config set registry https://registry.npm.taobao.org
[root@iZwz9iy3ddbp ~]# npm config get registry
https://registry.npm.taobao.org/

@H_404_0@更换成功!

@H_404_0@其他详细命令请看博客:http://blog.csdn.net/quuqu/article/details/64121812

安装vue-cli脚手架
@H_404_0@cnpm install -g vue-cli

@H_404_0@参数:

@H_404_0@-g 表示全局安装。不加的话,就是当前目录安装。

@H_404_0@[root@iZwz9iy3ddbp ~]# vue --version

@H_404_0@2.8.1

创建一个基于 webpack 模板的新项目
@H_404_0@我本地目录是/vue/project 备注:根据自己本地新建的来没有限制

@H_404_0@执行命令:

@H_404_0@cd/vue/project

@H_404_0@@H_606_404@vue init webpack my-project

@H_404_0@# 安装依赖

@H_404_0@cd my-project

@H_404_0@npm instal

@H_404_0@npm run dev

@H_404_0@[root@iZwz9iy3ddbp ~]# cd /vue/project/my-project
[root@iZwz9iy3ddbp my-project]# npm install
my-project@1.0.0 /vue/project/my-project
└── (empty)

npm ERR! code 1
[root@iZwz9iy3ddbp my-project]# npm run dev
> my-project@1.0.0 dev /vue/project/my-project
> node build/dev-server.js
> Starting dev server...

DONE Compiled successfully in 2960ms 5:28:22 PM

> Listening at http://localhost:8080

(node:15280) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3

@H_404_0@看着报错了但是启动没什么问题,网上说新版本都有这个警告所以试试访问结果!

@H_404_0@注意系统8080端口是否开启:

@H_404_0@# centos7 默认是安装了firewalld防火墙的

@H_404_0@# 永久开放端口

@H_404_0@firewall-cmd --permanent --add-port={8090/tcp,8080/tcp}

@H_404_0@# 重启防火墙

@H_404_0@firewall-cmd --reload

@H_404_0@# 查看防火墙状态

@H_404_0@firewall-cmd --state

@H_404_0@# 显示目前的设定

@H_404_0@firewall --cmd --list --all

@H_404_0@如果以上命令执行之后没有结果,登录你的阿里云账号在控制台设置下端口的进入进出问题。具体教程请百度

@H_404_0@OK!到这里告一段落下一篇写下vue的版本库问题!

猜你在找的CentOS相关文章