一、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. 2018.10.19 NOIP训练 变化的序列(线性dp)

    传送门 f[i][j]f[i][j]f[i][j]表示后iii个对答案贡献有jjj个a的方案数. 可以发现最后a,ba,ba,b的总个数一定是n∗(n−1)/2n*(n-1)/2n∗(n−1)/2 因 ...

  2. 2018.10.14 loj#6012. 「网络流 24 题」分配问题(费用流)

    传送门 费用流水题. 依然是照着题意模拟建边就行了. 为了练板子又重新写了一遍费用流. 代码: #include<bits/stdc++.h> #define N 305 #define ...

  3. 2018.10.04 NOIP模拟 航班(tarjan+树形dp)

    传送门 考场上自己yy了一个双连通只有40分. 然后换根dp求最长路就行了. 代码

  4. hadoop 学习之异常篇

    本文旨在给予自己在学习hadoop过程中遇到的问题的一个记录和解决方法. 一. copyFromLocal: java.io.IOException: File /user/hadoop/slaves ...

  5. UltraEdit配置

    1.如何在vivado中调用UltraEdit 1.语法高亮 支持不同的编程语言,但是要添加相就的文件,这样不同语言的关键字就可以高亮显示. 在高级-> 配置 –> 语法高亮,选择文档 2 ...

  6. C语言printf的格式

    例1 int a = 12345;printf("%6d",a); // 输出6位不够左边补空格printf("%.6d",a); // 输出6位不够左边补0例 ...

  7. day05(Object,tostring(),equals(),System,Date,SimpleDateFormat,拆装箱,正则表达式)

    Object类, 是所应类的父类: 拥有自己的方法:常用的    红颜色标记的为常用的方法 toString() 用法:打印对象的地址值 getClass() 获取当前类的字节码文件getName() ...

  8. codeforces 702C Cellular Network 2016-10-15 18:19 104人阅读 评论(0) 收藏

    C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  9. PAT甲 1008. Elevator (20) 2016-09-09 23:00 22人阅读 评论(0) 收藏

    1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The highest ...

  10. Gridview的RowDataBound事件可以做很多事情

    protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e)        {            //如果是绑 ...