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兼容正则表达 ...
随机推荐
- 简明PR教程
注意:本文供培训使用且仅为第一版 作者也不打算继续更新 本篇文章最早是在为内部培训时所编写的文章 有些疏漏且没有进行校正等工作 我尽力用最简单通俗的语言给大家介绍PR的使用方法 简明PR教程 1.编辑 ...
- 2018.07.08 hdu1394 Minimum Inversion Number(线段树)
Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...
- java常用设计模式一:单例模式
1.饿汉式 package singleton.demo; /** * @author Administrator * @date 2019/01/07 */ public class Single ...
- Class^=,Class*= ,Class$=含义(转)
在Twitter 中有看到如下selector: .show-grid [class*="span"] { background-color: #eee; text-align: ...
- IntelliJ IDEA 2017版 使用笔记(四) 模板 live template自定义设置;IDE快捷键使用
1.File ---> setting ---->Live Template 2.添加模板 3.添加模板组 4.模板组命名 5.填写配置 6.Template ...
- timescale
`timescale 1ns/100ps 表示时延单位为1ns, 时延精度为100ps.`timescale 编译器指令在模块说明外部出现, 并且影响后面所有的时延值.
- struts2-core-2.3.20.jar
核心配置位于该jar struts-default.xml struts-2.3.dtd <?xml version="1.0" encoding="UTF-8&q ...
- SharpMap源代码解析
1. 简介 SharpMap是基于.net2.0的GIS系统.支持多种.NET开发语言(C# C++ 等).使用属性数据作为注记.符合OpenGIS的简单要素规范(OpenGIS Simple Fea ...
- NHibernate的搭建
1.新建项目 Business:业务逻辑类 Data:数据层,存放数据库的操作及Nhibernate辅助类 Domain:数据实体和数据库映射文件 2.使用NuGet下载Nhibernate 数据库配 ...
- Oracle EBS中有关Form的触发器的执行顺序
http://blog.csdn.net/postfxj/article/details/8135769 触发器执行顺序: 1. 当打开FORM时: (1) PRE-FORM (2) ...