一、nodejs的安装

Node.js安装包及源码下载地址为:https://nodejs.org/en/download/

我们可以根据不同平台系统选择你需要的Node.js安装包。Node.js 历史版本下载地址:https://nodejs.org/dist/

这里演示的是Window64位安装Node.js,下面演示的是采用安装包的方式来安装。

1、Windows 安装包(.msi)

Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录,并点击 next(下一步):

:点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):

安装完之后启动cmd依次执行以下两条命令检测是否安装成功,结果如下:

二、node.js的环境变量的新建。  //我安装的路径是 D:\soft\nodejs

其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。

1、 启动cmd依次执行以下两条命令

  npm config set prefix " D:\soft\nodejs\node_global"
  npm config set cache " D:\soft\nodejs\node_cache"

2、 设置环境变量

  说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径

  1.鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。

  2.点击环境变量弹出下列对话框:

  3.新增系统变量NODE_PATH:把变量值设置成“D:\soft\nodejs\node_global\node_modules” (这样就可以把后面全局安装的装到global里并且可以直接用命令使用。)

4. 修改用户变量PATH:选中PATH,点击编辑,把“D:\soft\nodejs\node_global;”加到前面

三、安装淘宝的npm镜像

  输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

  这个其实看个人爱好吧,因为npm在国内下载速度是很慢,所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。

四、安装全局vue-cli脚手架、webpack

命令输入

  cnpm install vue –g  //全局安装vue

 cnpm install -g vue-cli                        //全局安装vue-cli

  cnpm install -g webpack                          //全局安装webpack

cnpm install -g webpack-dev-server             //安装webpack的本地webserver

  安装完成后,vue-cli脚手架其实就已经把vue也装掉了,所以只需输入vue  -V 和 webpack  -v  等等就可以查看安装成功与否。

下面是以上命令的结果:

$ npm install vue -g

E:\nodejs\node_global
`-- vue@2.4. $ npm install -g vue-cli E:\nodejs\node_global\vue-init -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
E:\nodejs\node_global\vue-list -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
E:\nodejs\node_global\vue -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue
E:\nodejs\node_global
`-- vue-cli@2.9.
+-- async@2.5.
| `-- lodash@4.17.
+-- chalk@2.1.
 ..... 此处省略很多结果数据 ..... $ npm install webpack -g E:\nodejs\node_global\webpack -> E:\nodejs\node_global\node_modules\webpack\bin\webpack.js
> uglifyjs-webpack-plugin@0.4. postinstall E:\nodejs\node_global\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
E:\nodejs\node_global
`-- webpack@3.7.
+-- acorn@5.1.
+-- acorn-dynamic-import@2.0.
.....此处省略多行数据....... npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0. (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) $ npm install -g webpack-dev-server

E:\nodejs\node_global\webpack-dev-server -> E:\nodejs\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js
E:\nodejs\node_global
+-- UNMET PEER DEPENDENCY webpack@^2.2. || ^3.0.
`-- webpack-dev-server@2.9.
+-- ansi-html@0.0.
+-- array-includes@3.0.
.....此处省略多行数据...... npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0. (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN webpack-dev-server@2.9. requires a peer of webpack@^2.2. || ^3.0. but none was installed.
npm WARN webpack-dev-middleware@1.12. requires a peer of webpack@^1.0. || ^2.0. || ^3.0. but none was installed.

Vue环境搭建及node安装过程整理的更多相关文章

  1. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  2. 55.Vue环境搭建

    Vue环境搭建 在搭建过程中出现的错误解决办法  https://www.cnblogs.com/lovebing/p/9488198.html      cross-env使用笔记   cross- ...

  3. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  4. LNMP环境搭建之php安装,wordpress博客搭建

    LNMP环境搭建之php安装,wordpress博客搭建 一.介绍: 1.什么是CGI CGI全称是"通用网关接口"(Common Gateway Interface),HTTP服 ...

  5. Vue环境搭建及第一个helloWorld

    Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置  https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...

  6. 前端(二十三)—— Vue环境搭建

    目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...

  7. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

  8. vue环境搭建以及使用vue-cli创建项目

    我要跑vue项目,所以我要搞vue. 1.环境搭建 进入node官网下载对应版本的node,一步步安装即可. 安装会自动配置路径和npm包管理环境,通过node -v进行验证 2.安装vue-cli脚 ...

  9. LNMP环境搭建:Nginx安装、测试与域名配置

    Nginx作为一款优秀的Web Server软件同时也是一款优秀的负载均衡或前端反向代理.缓存服务软件 2.编译安装Nginx (1)安装Nginx依赖函数库pcre pcre为“perl兼容正则表达 ...

随机推荐

  1. 1.struts 防止表单重复提交 2. 拦截器

    1. 使用struts 防止表单提交 时, form 表单必须使用struts标签库编写,如<s:form/> 等,而不是html标签 2. 拦截器是struts2的核心.  interc ...

  2. tty linux 打开和设置范例

    http://bbs.csdn.net/topics/340184140 /************************************************************** ...

  3. yii2缓存

    use yii\caching\Cache;$cache = Yii::$app->cache;$cache['var1'] = $value1;  // equivalent to: $cac ...

  4. Java中读取.properties配置文件的通用类

    由于Java中读取配置文件的代码比较固定,所以可以将读取配置文件的那部分功能单独作为一个类,以后可以复用.为了能够达到复用的目的,不能由配置文件中每一个属性生成一个函数去读取,我们需要一种通用的方法读 ...

  5. Java static说明

    class Person{ String name;//成员变量,实例变量 static String country = "CN";//静态变量.类变量 public void ...

  6. excel绝对引用中间添加符号

    =F1&"_"&J1 绝对引用 相对引用 按F4 然后复制全部,选择性黏贴,值和数字即可

  7. 状态机中的RAM注意的问题--减少扇出的办法

    可能我不会抓紧时间,所以做事老是很慢.最近在整维特比译码过程深感自己有这样的毛病. 每天会有一点进展,但是却是一天的时间,感觉别人都做起事情来很快.可能这个东西有点难,做 不做得出来都不要紧,但我的想 ...

  8. bootstrap-treeview 关于checkbox选择框不显示的问题

    bootstrap-treeview.js  1.0.2 不支持checkbox,最后使用 bootstrap-treeview.js  1.2.0 解决此问题.

  9. Spring MVC深入讲解

    一.前言: 大家好,Spring3 MVC是非常优秀的MVC框架,由其是在3.0版本发布后,现在有越来越多的团队选择了Spring3 MVC了.Spring3 MVC结构简单,应了那句话简单就是美,而 ...

  10. dubbo 源码编译记录

    DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,阿里内部采用sofa框架,同属于分布式RPC框架,dubbo开源,而sofa ...