首页 > 代码库 > Vue.js安装

Vue.js安装

环境

操作系统:window7 
虚拟机:centos7 
vue.js: 2.8

安装nodejs

参考我得文章: 
http://blog.csdn.net/u013066244/article/details/63279337

安装cnpm

由于npm是要访问外网的,很慢,所以我们可以使用淘宝的镜像。

百度搜索:淘宝npm镜像 
可以看到cnpm的淘宝官网。

npm install -g cnpm --registry=https://registry.npm.taobao.org


验证:

[yutao@yutao-19 ~]$ cnpm -v
cnpm@4.5.0 (/usr/programe_files/node-v6.10.1/lib/node_modules/cnpm/parse_argv.js)
npm@3.10.10 (/usr/programe_files/node-v6.10.1/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@6.10.1 (/usr/programe_files/node-v6.10.1/bin/node)
npminstall@2.26.4 (/usr/programe_files/node-v6.10.1/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/programe_files/node-v6.10.1 
linux x64 3.10.0-514.el7.x86_64 
registry=https://registry.npm.taobao.org

在我的实践过程中,使用cnpm初始化vue项目时会报错,所以还是使用npm,把它的源换下就可以啦

更换npm源

npm config set registry

https://registry.npm.taobao.org // 配置后可通过下面方式来验证是否成功

npm config get registry // 或 npm info express

http://riny.net/2014/cnpm/

 

安装vue-cli

我们已经安装好了cnpm,所以以后要用到npm的地方,使用cnpm就可以啦

cnpm install -g vue-cli

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

验证:

[yutao@yutao-19 ~]$ vue --version
2.8.1


我执行上面的命令虽然安装OK,但是安装显示的过程中,有错误。

所以在更换npm源之后,我再次执行:

# 全局安装 vue-cli
$ npm install --global vue-cli


我本来想先卸载在执行,结果网上我没有找到方法,想想,再次执行,应该是覆盖,所以就这么干了。

官网的小例子。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev


在执行最后启动项目后,显示:

[yutao@yutao-19 my-project]$ npm run dev
> my-project@1.0.0 dev /home/yutao/webvueproject/my-project
> node build/dev-server.js
> Starting dev server...
 DONE  Compiled successfully in 12082ms             16:32:04
> Listening at http://localhost:8080
(node:3340) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3


这里报了个警告,适合是nodejs报的,网上解释,最新版都这样,不确定,咱是后端开发,不懂。

由于我是安装在虚拟机中的,所以我的访问地址是http://192.168.11.130:8080/。

结果没有显示。

Linux的安全机制很高的,需要在防火墙给端口8080开后门。

# centos7 默认是安装了firewalld防火墙的
# 永久开放端口
firewall-cmd --permanent --add-port={9200/tcp,9100/tcp,5601/tcp, 8080/tcp}
firewall-cmd --permanent --zone=public --add-port=8080/tcp
firewall-cmd --permanent --zone=public --add-port=8080/udp # 重启防火墙 firewall-cmd --reload # 查看防火墙状态 firewall-cmd --state # 显示目前的设定 firewall-cmd --list-all



这样就可以访问了。

国内优秀npm镜像推荐及使用

https://cn.vuejs.org/v2/guide/installation.html

 

Vue.js安装