Vue开发的基础环境搭建配置（附：多版本node开发配置工具nvm）

LeaT
1,425 阅读7分钟

Vue的运行主要是依赖于node的npm来实现的，因此，Vue的开发环境主要是搭配Node+Vue。

Node安装

1. 官网下载安装镜像

Node.js，根据需要下载对应版本Node(Vue2和Vue3区别)

image.png

注意：如果需要安装其它的版本，可在下载按钮下方选项中找到，点击进入，查找对应版本和安装包进行下载（示例：window x64平台的 node@14.17.6版本的.msi文件下载，下载成功后，右键以管理员身份运行安装）。

image.png

image.png

2. 安装Node以及环境配置

通常情况下，Node安装包含了Node的安装以及后续npm安装的全局模块、缓存cache的路径。因此，避免占用过多的C盘空间，一般在其它盘做空间分配。

例如：当希望 Node 以及模块安装和缓存路径均配置在【D:\Program Files\】新建的nodejs目录下，则需要以下步骤：

  1. 傻瓜式（Next）安装Node（以管理员身份运行安装，否则可能出现npm权限不够的问题）；
  2. 在nodejs目录下，创建【node_global】和【node_cache】文件夹，如下图；
  3. 配置环境变量：右击【此电脑】，选择【属性】，打开【高级系统设置】，点击环境变量，
    • 用户变量：【PATH】值新增：D:\Program Files\nodejs\node_global；
    • 系统变量：新增【NODE_PATH】，配置值为【D:\Program Files\nodejs\node_global\node_modules】；【Path】中新增%NODE_PATH%\node_modules、%NODE_PATH%\node_global
  4. npm变量更改设置：win+R打开cmd窗口，输入命令进行设置：
    • 全局安装模块：npm config set prefix "D:\Program Files\node_global"
    • 缓存：npm config set cache "D:\Program Files\node_cache"

image.png

image.png

image.png

image.png

image.png

image.png

  1. win+R打开cmd窗口，输入 node -v 测试node是否安装成功（部分电脑提示未安装，可重启重试）。

image.png

  1. win+R打开cmd窗口，输入npm install express -g测试全局安装：查看配置目录下的【node_global】文件夹是否存在依赖包即可；

3. cnpm安装配置

由于npm服务器在国外，拉取资源较慢，一般使用淘宝镜像cnpm替代，执行：npm install -g cnpm --registry=https://registry.npm.taobao.org安装。

运行cnpm -v查询cnpm包，如果显示不是内部或外部命令...，则表示系统变量path未包含cnpm，添加上该路径即可。

Vue的安装和配置

Vue2版本

npm install vue-cli -g
npm i webpack webpack-cli -g // 安装webpack模板
  1. 安装完成后，vue -V查看Vue版本，Vue2最后一个版本号v2.9.6；
  2. 新建并启动Vue2项目：
e:   // 避免在C盘创建vue项目
cd vue_demo
vue init webpack 项目名

出现 # Project initialization finished! 说明项目创建完毕，可进入初始化：

cd 项目名
npm run dev

常见问题：

  • 安装 Vue-cli 出现 EXIST: file already exists, cmd shim ‘C:\Users\...：原因是安装了旧版本的vue-cli，需要卸载重装（卸载后检查【C:\Users\l\AppData\Roaming\npm】是否还存在vue相关文件，存在则清理）；

Vue3版本

注：如果安装了Vue2，需要先卸载再安装Vue3。

vue -V
cnpm uninstall vue-cli -g
cnpm i @vue/cli -g

常见问题：

  • 安装过程后，出现报错：##### request to https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.,解决办法：npm config set strict-ssl false npm clean cache -force，即强制清理；
  • cnpm提示：cannot find module 'fs/promises，表示cnpm版本有问题，解决办法：
    • 升级node版本；
    • 降低cnpm版本： npm install cnpm@7.1.0 -g --registry=https://registry.npmmirror.com
  • 报错：vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443,解决办法：github.com/vuejs-templ…中下载如下图版本，解压到【C:\Users\l.vue-templates】中，把文件名改为【webpack】，最后面加 --offine创建。
 vue init webpack vue2 --offline

image.png

  1. 安装完成后，vue -V查看Vue版本；
  2. 新建并启动项目：
e:
cd vue3_demo
vue3 create 项目名

默认选择第一项创建：

image.png

cd 项目名
npm run serve
  1. 其它

vue-cli3不支持 vue init webpack 项目名 命令，但是可以通过安装桥接工具：@vue/cli-init包支持，这样可以使用vue init webpack 项目名 命令创建vue2项目。

// 需使用旧版本（vuecli<3）的vue init功能，可全局安装桥接工具
cnpm i -g @vue/cli-init

vue init webpack vue2_demo

vue create vue3_demo

image.png

说明：vue-cli3+可创建Vue2项目，但是创建出来的目录和vue-cli2创建的目录有所不同：

  • vue3没有template-compiler包，vue2有；
  • 如果需要安装vue-router等依赖包，可选择自定义安装模式；
  • package.json文件中，"serve": "vue-cli-service serve --open" 表示启动命令打开后，自动打开页面。

Vue版本使用注意事项

  • Vue Cli4.5 以下，对应Vue2；
  • Vue Cli4.5 以上，对应Vue3；
  • Vue2使用 element-ui 组件库，Vue3使用 element-plus 组件库；
  • Vue2使用 vant2@latest-v2 组件库，Vue3使用最新的 vant3/4 组件库；
  • Vue2搭配vue-router3,Vue3搭配vue-router4;

nvm使用

nvm：nodejs的版本管理工具，可以接受多版本nodejs存在不兼容的现象，通过切换调用所需的安装的版本的nodejs。

安装NVM前，需要完全卸载本地node！！！

nvm下载安装

下载链接：nvm-windows

image.png

下载完成后，右键以管理员身份运行安装（记得修改默认C盘安装哦~）；

nvm 环境变量配置

  1. nvm安装目录中找到【setting.txt】 添加以下配置：
node_mirror:https://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/
  1. 【此电脑】-【高级系统配置】-【环境变量】中查看添加以下配置：

image.png

node安装

nvm -v // 查看版本号

nvm install 16.12.0 // 安装指定版本的node 

nvm ls // 查看可使用的已安装的node

nvm use 16.12.0 // 使用指定版本的node

cnpm安装

npm install -g cnpm --registry=http://r.cnpmjs.org

// 淘宝的
npm install -g cnpm --registry=https://registry.npm.taobao.org

检查：

 cnpm -v  
 cnpm config get registry

配置淘宝镜像：npm config set registry registry.npmmirror.com/

cnpm安装：npm i cnpm -g --registry=https://registry.npm.taobao.org

yarn安装：npm install yarn -g

npm修改

  • 配置npm全局安装依赖包的路径(避免多版本的node自带的npm安装的全局的其它依赖包下载后不可用)：npm config set prefix "D:\NVM\nvm\npm"，配置好后，可在【C:\Users[name]】目录下.npmrc文件看到以下配置内容：

image.png

  • 在【系统环境变量】中的path添加D:\NVM\nvm\npm（没有就新建一个npm文件夹就好啦~）。配置完成后，需要关闭cmd窗口重新打开使用。
  • 安装全局的npm，不同的node都是用这个npm。
npm install npm -g --registry=https://registry.npm.taobao.org

安装成功后，检查npm -v

其它

临时指定淘宝镜像源：
npm --registry https://registry.npm.taobao.org install express

永久指定淘宝镜像源：
npm config set registry https://registry.npm.taobao.org

安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org


注意：
npm 淘宝镜像已经从  网页链接http://registry.npm.taobao.org/ 切换到了  网页链接http://registry.npmmirror.com/
旧域名也将停止服务。

2024年1 月，淘宝原镜像域名（http://registry.npm.taobao.org/）的 HTTPS 证书到期，旧的 npm 淘宝镜像在使用时有可能会出错。

解决方案：
1 、清空缓存
npm cache clean --force
2 、查看当前的npm镜像设置
npm config get registry
3、切换新源
npm config set registry  网页链接
4、查看新源是否设置成功
npm config get registry
5、可以正常安装需要的工具了
npm insatll

nvm常用指令

nvm off                     // 禁用node.js版本管理(不卸载任何东西)
nvm on                      // 启用node.js版本管理
nvm install <version>       // 安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm uninstall <version>     // 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm ls                      // 显示所有安装的node.js版本
nvm list available          // 显示可以安装的所有node.js的版本
nvm use <version>           // 切换到使用指定的nodejs版本
nvm v                       // 显示nvm版本
nvm install stable          // 安装最新稳定版
avatar
文章
阅读
粉丝