windows下的node.js和npm的安装步骤详解
一、使用之前,我们先来掌握3个东西是用来干什么的。
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
开始:
如图,下载8.9.3 LTS (推荐给绝大部分用户使用)
双击安装
可以使用默认路径,本例子中自行修改为d:\nodejs
一路点Next
点Finish完成
打开CMD,检查是否正常
再看看另外2个目录,npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\nodejs
先如下图建立2个目录
然后运行以下2条命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
如上图,我们再来关注一下npm的本地仓库,输入命令npm list -global
输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站
输入命令npm config list 显示所有配置信息,我们关注一个配置文件
C:\Users\Administrator\.npmrc
使用文本编辑器编辑它,可以看到刚才的配置信息
检查一下镜像站行不行命令1
npm config get registry
检查一下镜像站行不行命令2
Npm info vue 看看能否获得vue的信息
注意,此时,默认的模块D:\nodejs\node_modules 目录
将会改变为D:\nodejs\node_global\node_modules 目录,
如果直接运行npm install等命令会报错的。
我们需要做1件事情:
1、增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules
(注意,一下操作需要重新打开CMD让上面的环境变量生效)
一、测试NPM安装vue.js
命令:npm install vue -g
这里的-g是指安装到global全局目录去
二、测试NPM安装vue-router
命令:npm install vue-router -g
运行npm install vue-cli -g安装vue脚手架
编辑环境编辑path
对path环境变量添加D:\nodejs\node_global
win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】
重新打开CMD,并且测试vue是否使用正常
注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,
他的配置并不全放在根目录下的 webpack.config.js 中。
初始化,安装依赖
运行npm install安装依赖
npm run dev
成功界面,提示打开地址http://localhost:8080
自动打开浏览器http://localhost:8080/#/
npm run build
生成静态文件,打开dist文件夹下新生成的index.html文件
nmp下新建出来的vue01的目录描述:
windows下的node.js和npm的安装步骤详解的更多相关文章
- windows下搭建node.js及npm的工作环境
近期在研究数据可视化D3框架,决定在windows下搭建一个nodejs及npm的工作环境,在网上查了n篇文章,别管是编译源代码安装也好.还是使用node.msi格式安装包也好,总是有问题.终于,功夫 ...
- 基于windows下,node.js之npm
1.下载node.js一路安装下去 在开始 node文件夹下,打开cmd 2.创建一个开发目录 mkdir reactQa && cd reactQa 3.初始化一个nmp的开发环境 ...
- [转]Windows下配置Node.js和Cordova
本文转自:https://blog.csdn.net/weixin_37730482/article/details/74388056?locationNum=3&fps=1 本文讲解在win ...
- Node.js中环境变量process.env详解
Node.js中环境变量process.env详解process | Node.js API 文档http://nodejs.cn/api/process.html官方解释:process 对象是一个 ...
- Windwos安装Node.js和npm的详细步骤
How to Install Node.js and NPM on Windows Node.js和npm 安装 Node.js 的时候会自动安装 npm ,并且 npm 就是 Node.js 的包管 ...
- angular2.0学习笔记1.开发环境搭建 (node.js和npm的安装)
开发环境, 1.安装Node.js®和npm, node 6.9.x 和 npm 3.x.x 以上的版本. 更老的版本可能会出现错误,更新的版本则没问题. 控制台窗口中运行命令 node -v 和 n ...
- 【随笔】node.js + npm的安装
需要用到node.js和npm,所以来安装下. 在网上找了找教程,好多都是分开装的,各种麻烦各种事,最后还是在node.js官网里下载解决了.记录一下. 如果安装在当前环境,直接点击install会自 ...
- 安装node.js 和 npm 的完整步骤
vue 生命周期 1,beforeCreate 组件刚刚被创建 2,created 组件创建完成 3,beforeMount 挂载之前 4,mounted 挂载之后 5,beforeDestory 组 ...
- Vue项目一、node.js和npm的安装和环境搭建
一.为什么安装node.js及npm npm npm是Node.js的包管理工具(package manager),是全球最大的生态系统,同过npm可以找到很多丰富的插件来满足项目的需求. a1.现在 ...
随机推荐
- SpingCloud微服务架构学习(二)之Actuator监控
我们那我们之前编写的服务提供者为例,为项目添加如下依赖: <dependency> <groupId>org.springframework.boot</groupId& ...
- Start activity with App Chooser or not ?
启动一个Activity,可以直接使用Intent,例如: Intent intent = new Intent(Intent.ACTION_SEND); ... startActivity(inte ...
- intellijidea课程 intellijidea神器使用技巧 6-2 数据库关联
待温习完Spring之后再来看 database关联和表名字段等智能提示
- 【起航计划 018】2015 起航计划 Android APIDemo的魔鬼步伐 17 App->Alarm->Alarm Service
Alarm Service和Alarm Controller 例子非常类似,只是Alarm Service是用来Schedule一个Service,而前面的例子是来Schedule一个Broadcas ...
- Struts2_结果类型_resulttype_1
看下面的例子: 一般使用4种:dispatcher(容器内跳转到JSP页面).redirect(重定向到jsp页面).chain(容器内跳转到另一个Action).redirectAction(重定向 ...
- expres webpack es6 babel 构建多页系统开发架构
开始写点什么... 只是一个思路........
- SSL Labs: Increased Penalty When TLS 1.2 Is Not Supported
https://community.qualys.com/blogs/securitylabs/2015/05/22/ssl-labs-increased-penalty-when-tls-12-is ...
- 西门子(SIEMENS)软件安装时需要重启的解决方法,regedit restart
打开注册表(regedit) 删除注册表项 HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manage\PendingFile ...
- 在Markdown中插入不会显示的注释文本
方法1 <!-- your comment goes here --> 方法2 [//]: <> (This is also a comment.) 原文地址: https:/ ...
- 初学React:JSX语法
这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>第一个组件.js 'use strick ...