Vue工程化结构环境安装及搭建教程 ： 之nvm

vue需要的环境：

node.js :

Node.js和Vue.js通常会一起使用。Node.js作为后端服务器，处理服务器端的逻辑和数据访问，而Vue.js则负责前端用户界面的构建和交互。通过Ajax通信，Vue.js应用程序向Node.js服务器发送请求，并使用服务器返回的数据更新UI。这种前后端分离的方式提高了Web应用程序的可维护性和可扩展性。

npm:

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，主要用来安装vue项目需要的一些包和资源，运行项目也要用到npm

vue-cli脚手架：

Vue脚手架是用于快速构建Vue.js项目的工具。它提供了一系列的命令和模板，可以帮助开发者快速搭建项目的基础结构，提高开发效率。搭建项目的框架

webpack:

‌webpack是一个前端构建工具，主要用于代码的打包和优化

我们主要使用nvm来管理node.js的版本，它是一个版本管理工具，可以方便随时切换。有些时候运行别人的项目的时候，和自己的node版本不一样，就运行不出来，这时候就需要重新换它项目开发时候的版本了，直接安装node.js太麻烦了，每次切换版本都要卸载然后重新装，配置环境。

nvm安装教程：

进入下载地址：            


https://github.com/coreybutler/nvm-windows/releases

windows系统下载nvm-setup.zip安装包

2. NVM安装

如果电脑上之前已经单独安装了node，先卸载删除（原先的环境变量也不需要了可以删除），然后解压nvm-setup.zip安装包，进入解压的文件夹，双击exe后缀文件进行安装：

选择nvm的安装路径：

选择nodejs的快捷方式路径（这里一定得是空文件夹或者不创建这个文件夹，因为nvm会自动创建这个文件夹为快捷方式）：

下一步后确认安装即可

验证：

安装完成后查看环境变量会发现新增了NVM_HOME(nvm安装路径)和NVM_SYMLINK(nvm自动创建的nodejs文件夹的快捷方式路径)，如下图：

在命令行窗口输入nvm后有如下图信息证明安装成功：

三、NVM使用

注意：nvm在切换node版本时需要系统的管理员权限，所以需要以管理员身份打开命令行窗口！！！

1. 设置nvm环境

nvm默认会从github下载npm，可能会有网络问题，所以最好设置为淘宝镜像。nvm的配置也很简单，可以采用命令方式，在shell中执行：

1 2	nvm node_mirror https://npm.taobao.org/mirrors/node/ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

或者直接修改配置文件（在nvm安装路径下的settings.txt），如下图：

2.安装nodejs

直接命令行执行（v6.9.4可以替换为需要安装的版本，此处仅做示例）：

1	nvm install v20.1.0

安装成功

执行nvm list查看效果如下：

3.使用或切换nodejs版本

nvm use 20.1.0

4.全局安装vue

npm install vue -g

npm全局安装的淘宝镜像源：

npm config set registry https://registry.npmmirror.com

                

5.安装webpack（非必须）

npm install webpack -g

npm install webpack-cli -g

6.安装脚手架vue-cli

npm install vue-cli -g

7.创建一个vue应用程序

vue create my-project

cd my-project

运行项目命令：

npm run dev  （vue2）

npm run serve  (vue3)

 查看vue版本的命令--npm list vue

说明这是vue3

vue  ui  命令  是打开vue的图形化界面进行项目管理

查看node.js版本

查看vue脚手架版本

查看npm版本