nodejs_npm安装 以及 vue 框架安装配置详细教程

npm：是随同 NodeJS 一起安装的包管理工具，能解决 NodeJS 代码部署上的很多问题。比如常用的有：

1. 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
2. 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。

nodejs安装:

• 首先：先从 nodejs.org 官网下载 nodejs 安装包，如图，下载10.15.3 LTS 版本即可

 

• 找到刚刚下载的 msi 安装包，双击安装

• 一直 Next 即可

• 勾选接受协议

• 指定安装路径，这里以安装到 D 盘为例，可以使用默认路径

• 此步会自动添加 PATH 环境，不用做任何修改

• 点击 finish 完成安装

• 查看你的安装目录是否有以下的文件

• 打开命令提示符程序（CMD）, 检查是否正常

 

• 在黑色终端窗口输入 echo %PATH% , 即可看到系统已添加的环境变量列表, 如图
• 紧接着输入 node -v 和 npm -v 分别查看 nodejs 和 npm 的版本

• 在以下路径，再看看另外2个目录
• npm的本地仓库默认在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)
• 由于个人使用习惯: 这里我把这2个目录移动回到 D:\Develop\nodejs 目录下, 具体操作如下: 

 

• 接着在安装目录，先手动创建如下图的2个目录

 

• 然后打开黑色终端窗口，运行以下2条命令( 注意:这里路径改成自己的安装路径 )

npm config set prefix "D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

 

• 如下图，我们再来查看一下npm的本地库路径，输入命令 npm list -global

 

• 输入命令 npm config set registry=http://registry.npm.taobao.org 配置镜像站, 此步可提升下载速度

• 输入命令npm config list 显示所有配置信息，我们重点关注一个配置文件

 

• 在这个目录下 C:\Users\Administrator\.npmrc ( 此处的Administrator是你电脑的账户名称 )

 

• 使用文本编辑器打开配置文件(.npmrc)，可以看到刚才用命令设置的配置信息

• 执行以下命令,  可以确认镜像源是否设置成功
• npm config get registry

• 执行 npm info vue 看看能否获得vue的信息

 

• 执行 npm install npm -g 命令开始安装更新

 

注意，此时，默认的模块D:\Develop\nodejs\node_modules 目录

将会改变为D:\Develop\nodejs\node_global\node_modules 目录。

如果直接运行 npm install 等命令会报错的。我们需要做1件事情：

• 增加环境变量NODE_PATH 内容是：D:\Develop\nodejs\node_global\node_modules

 

（注意，一下操作需要重新打开CMD让上面的环境变量生效）

 

---

vue安装:

• 测试 NPM 安装 vue.js
• 命令：npm install vue -g
• 这里的 -g 是指安装到我们设置的 global 全局目录去

• 测试 NPM 安装 vue-router
• 命令：npm install vue-router -g

• 安装 vue 框架
• 运行npm install vue-cli -g 

•  编辑环境、编辑path

 

• 对path环境变量添加D:\Develop\nodejs\node_global
• win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

• 重新打开CMD，并且测试vue是否使用正常

 

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的webpack.config.js 中。

• 执行命令 vue init webpack vue01
• 按照如下提示, 依次输入相关信息, 注意 yes 和 no 不要选错

 

 

• 初始化，安装依赖

 

• npm run dev（运行dev）

• 打开浏览器输入 http://localhost:8080/ 即可访问到以下界面
• ps: 如果想退出的话, 在终端按 Ctrl+C 可结束 dev

• 最后一步，生成静态文件，打开dist文件夹下新生成的index.html文件
• 命令: npm run build

到此 vue 的安装配置已顺利完成