环境

操作系统: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安装的更多相关文章

  1. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  2. 01: vue.js安装

    1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...

  3. vue.js 安装过程(转载)

      一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核 ...

  4. Vue.js安装使用教程

    一.说明 上大学前,请的都是前端JavaScript.后端ASP/PHP/JSP.前后端代码混杂:上大学时,请的都是前端Jquery.后端SSH.前后端代码分离通过模板关联:大学出来后,请的都是前端三 ...

  5. vue.js安装过程(npm安装)

    一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...

  6. Vue.js 安装及其环境搭建

    For me or other first studying vue.js. For Windows PC: 1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网 ...

  7. Vue.js 安装

    注意:vue.js 不支持 IE8 及其以下版本,学习前请保证你的浏览器兼容 ECMAScript 5,可访问 http://caniuse.com/#feat=es5 查看支持 ECMAScript ...

  8. vue.js安装教程

    vue.js环境搭建 1.下载node.js 网址:https://nodejs.org/en/ 版本:v10.16.3 2.安装node.js Node.js下载如下所示: 检查nodejs是否安装 ...

  9. 【转载】Vue.js 安装及其环境搭建

    注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...

随机推荐

  1. Chapter 1. Introduce

    前言 本书全名是<H.264 and MPEG-4 Video Compression, Video Coding For Next-generation Multimedia>,作者为 ...

  2. Latex加速: TexStudio的安装和使用

    TexStudio可以加速Latex的编辑和写作,这里简单介绍一下TexStudio的安装,配置和使用.但是有一个重要的前提,TexStudio会使Latex源代码和pdf文件并排显示,比较占用桌面的 ...

  3. Failed to sync Gradle project 'XX'错误解决

    错误代码 Failed to sync Gradle project 'WeChat' Error:Failed to find target with hash string 'android-24 ...

  4. H5编辑器核心算法和思想-遁地龙卷风

    代码和特性在chrome49下测试有效. 文本渲染的本质是对文本节点的渲染,通过浏览器内置的对象Range可以获得选择的起始点.与终止点   var range = getRangeObject(); ...

  5. YARN框架详解

    YARN框架详解 YARN官方解释 YARN是什么 The fundamental(定义) idea of YARN is to split(分开) up the functionalities(功能 ...

  6. 钉钉企业应用C#开发笔记之一(免登)

    关于钉钉 钉钉是阿里推出的企业移动OA平台,本身提供了丰富的通用应用,同时其强大的后台API接入能力让企业接入自主开发的应用成为可能,可以让开发者实现几乎任何需要的功能. 近期因为工作需要研究了一下钉 ...

  7. HDU 2203 亲和串(KMP)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=2203 题目: 亲和串 Time Limit: 3000/1000 MS (Java/Others)   ...

  8. 使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

    上文<使用 VS2017 和 js 进行桌面程序开发 - electron 之 Hello Word>介绍了如何使用 VS2017 开发 electron 桌面程序,今天来点有看头的,但是 ...

  9. 理解梯度下降法(Gradient Decent)

    1. 什么是梯度下降法?   梯度下降法(Gradient Decent)是一种常用的最优化方法,是求解无约束问题最古老也是最常用的方法之一.也被称之为最速下降法.梯度下降法在机器学习中十分常见,多用 ...

  10. Jenkins: 执行 PowerShell 命令

    Jenkins 默认是不支持执行 PowerShell 命令的,需要安装插件才能完成这样的任务.本文将介绍 Jenkins PoserShell 插件的基本用法和常见问题. 安装 PowerShell ...