Vue环境搭建及node安装过程整理
一、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安装过程整理的更多相关文章
- vue环境搭建与创建第一个vuejs文件
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
- 55.Vue环境搭建
Vue环境搭建 在搭建过程中出现的错误解决办法 https://www.cnblogs.com/lovebing/p/9488198.html cross-env使用笔记 cross- ...
- VUE环境搭建、创建项目、vue调试工具
环境搭建 第一步 安装node.js 打开下载链接: https://nodejs.org/en/download/ 这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...
- LNMP环境搭建之php安装,wordpress博客搭建
LNMP环境搭建之php安装,wordpress博客搭建 一.介绍: 1.什么是CGI CGI全称是"通用网关接口"(Common Gateway Interface),HTTP服 ...
- Vue环境搭建及第一个helloWorld
Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置 https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...
- 前端(二十三)—— Vue环境搭建
目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...
- Vue环境搭建、创建与启动、案例
vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...
- vue环境搭建以及使用vue-cli创建项目
我要跑vue项目,所以我要搞vue. 1.环境搭建 进入node官网下载对应版本的node,一步步安装即可. 安装会自动配置路径和npm包管理环境,通过node -v进行验证 2.安装vue-cli脚 ...
- LNMP环境搭建:Nginx安装、测试与域名配置
Nginx作为一款优秀的Web Server软件同时也是一款优秀的负载均衡或前端反向代理.缓存服务软件 2.编译安装Nginx (1)安装Nginx依赖函数库pcre pcre为“perl兼容正则表达 ...
随机推荐
- 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 因 ...
- 2018.10.14 loj#6012. 「网络流 24 题」分配问题(费用流)
传送门 费用流水题. 依然是照着题意模拟建边就行了. 为了练板子又重新写了一遍费用流. 代码: #include<bits/stdc++.h> #define N 305 #define ...
- 2018.10.04 NOIP模拟 航班(tarjan+树形dp)
传送门 考场上自己yy了一个双连通只有40分. 然后换根dp求最长路就行了. 代码
- hadoop 学习之异常篇
本文旨在给予自己在学习hadoop过程中遇到的问题的一个记录和解决方法. 一. copyFromLocal: java.io.IOException: File /user/hadoop/slaves ...
- UltraEdit配置
1.如何在vivado中调用UltraEdit 1.语法高亮 支持不同的编程语言,但是要添加相就的文件,这样不同语言的关键字就可以高亮显示. 在高级-> 配置 –> 语法高亮,选择文档 2 ...
- C语言printf的格式
例1 int a = 12345;printf("%6d",a); // 输出6位不够左边补空格printf("%.6d",a); // 输出6位不够左边补0例 ...
- day05(Object,tostring(),equals(),System,Date,SimpleDateFormat,拆装箱,正则表达式)
Object类, 是所应类的父类: 拥有自己的方法:常用的 红颜色标记的为常用的方法 toString() 用法:打印对象的地址值 getClass() 获取当前类的字节码文件getName() ...
- 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 ...
- 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 ...
- Gridview的RowDataBound事件可以做很多事情
protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e) { //如果是绑 ...