Vue（Node.js与npm）的安装与配置

Vue（Node.js与npm）的安装与配置

---

---

一、Vue是什么？

Vue 是一个用于构建用户界面的 渐进式 JavaScript 框架，由尤雨溪（Evan You）创建。它专注于视图层，易于集成到现有项目中，同时也能构建复杂的单页应用（SPA）。Vue 的核心特点包括：

响应式数据绑定：自动更新视图当数据变化。

组件化开发：将页面拆分为可复用的组件。

虚拟 DOM：高效渲染页面。

轻量灵活：核心库仅关注视图层，可逐步引入其他工具（如 Vue Router、Vuex/Pinia）。

二、环境安装与配置

（1）下载Node.Js

1. 进入Node.JS官方下载地址：Node.Js下载
2. 根据以下图示步骤即可下载Node.Js安装包 (Remark：推荐LTS，长久稳定版本)
   

（2）安装Node.Js

（3）检查Node.Js与npm是否安装成功

//1. 打开命令行窗口
//2. 检查node的版本 Should print "v22.14.0".
node -v
//3. 检查npm版本 Should print "10.9.2".
npm -v 

（3）配置Node.Js环境

1. 在Node.js目录创建全局安装目录 node_cache 和缓存日志目录 node_global 两个文件夹
   
2. 打开命令行窗口，输入以下内容配置npm设置

npm config set prefix “你的安装目录\node_global”
npm config set cache “你的安装目录\node_cache”
npm config set registry https://registry.npm.taobao.org

3. 检查npm配置修改情况

npm config list

4. 通过命令行配置的信息会在用户目录下的.npmrc文件存储，删除里面的配置信息或者删除文件就会恢复到默认设置

（4）配置环境变量

1. 修改用户变量下的Roaming\npm为Nodejs安装目录下的node_global
   
2. 系统变量下新建NODE_PATH

变量名：NODE_PATH
变量值：你的安装目录\node_global\node_modules

三、安装Vue

（1）npm安装Vue

1. 以管理员身份运行命令行窗口输入

npm install vue -g

2. 这里安装过程会碰到淘宝镜像地址已经过期失效的问题，可以使用两种解决方案
   

[1]. 切换回官方 npm 源（推荐）：
npm config set registry https://registry.npmjs.org/
[2]. 如果需要继续使用淘宝镜像：
淘宝镜像已迁移到新域名，请改用：
npm config set registry https://registry.npmmirror.com/

3. 安装webpack

npm install webpack -g

4. 安装Vue脚手架（Remark：warn信息不影响使用，无需处理）

npm install -g vue-cli

5. 安装Vue-Router

npm install vue-router -g

6. 检查modules，可以看到所有的模块都统一在node_modules管理，非常方便

四、卸载Node.Js步骤

五、注意事项

1. 镜像源选择：淘宝旧镜像(registry.npm.taobao.org)已弃用，应使用新镜像(registry.npmmirror.com)或官方源
2. 权限问题：安装全局包时需要管理员权限运行命令行
3. 警告信息：安装过程中的warn信息通常不影响使用
4. 目录结构：所有模块都统一在node_modules目录管理

六、实用建议

1. 环境变量配置后建议重启命令行窗口生效
2. 安装完成后可通过检查node_modules目录确认安装结果