前两天由于要做一个数据可视化网页，学了一下vue框架，然后自己装了一下环境，结果就是自己生不如死地装了一下午。本文主要介绍以下内容：
安装流程
框架的创建
创建完得到的文件的简单介绍
一些安装过程中遇到的问题
遇到的一些bug给大家做一个参考，万一哪一个倒霉孩子也遇上了(●'◡'●)。
我的参考文章
下面几个文章是我的参考文章，每个文章参考了哪些部分我都写出来了。
创建项目：Vue实战：两种方式创建Vue项目
配置环境变量、目录：好细的Vue安装与配置 还可以安装安装vue-router，webpack模板，webpack-cli（这三个我没装）
修改权限、配置镜像：Vue安装及环境配置
结合VSCode的使用：Vue3安装配置+VSCode开发环境搭建
下面正文开始
一.安装Node.js
Node.js是一个JavaScript运行环境，它允许JavaScript代码在服务器端运行。这意味着你可以使用JavaScript来编写服务器后端的应用程序，而不仅仅局限于前端开发。Node.js的作用不仅限于编写后端应用程序，它还可以对前端代码进行压缩、转译、整合等，从而提高前端开发和运行效率。
至于为什么安装vue要先安装Node.js，下面是AI给出的一点简单回答，可以做一个简单的了解，但是基于本人是框架的新手小白，AI的回答是否准确就无法辨别了，大家可以自己查一下。AI的介绍如下：
Vue项目通常使用现代构建工具，如Webpack、Vite等，这些工具能够帮助开发者进行代码打包、压缩和优化，从而提升应用的性能和加载速度。这些工具的运行依赖于Node.js环境，Node.js提供了必要的运行时支持，使得开发者能够在本地进行高效的开发和测试。
在Vue项目中，开发者会使用大量的第三方库和插件来增强应用的功能。Node.js的包管理器（如npm或Yarn）为这些依赖项提供了便捷的管理方式。通过npm或Yarn，开发者可以轻松地安装、更新和删除项目所需的依赖库，确保项目的稳定性和兼容性。
在开发过程中，为了方便查看实时效果，开发者需要使用开发服务器。Vue CLI自带的开发服务器可以提供实时热加载功能，即当开发者修改代码后，浏览器会自动刷新并显示最新的效果。这些开发服务器依赖于Node.js来运行，从而为开发者提供一个便捷的开发环境。
Vue不仅支持在客户端渲染，还支持服务器端渲染。服务器端渲染能够显著提升页面的首屏加载速度和SEO效果。Node.js作为服务器端的运行环境，可以方便地实现Vue的服务器端渲染。
1.下载以及安装
官网
选择Windows版本安装：
下载到本地得到下面的文件：
双击启动，自己修改一下安装路径，可以装在D盘，一定要自己记住这个路径，后面要用到很多次的。
然后一直点击下一步，别的东西不要勾选，最后install。
装完了，就在你自己装的路径里面：
2.cmd查看版本
打开cmd命令提示符，分别输入下面的两个命令，查看版本，如果版本出来了，就安装成功。
查看node版本
node -v
查看npm版本
npm -v
npm(node package manager)是Node.js的包管理器，用于安装、共享和管理JavaScript模块依赖，简化了开发流程中的版本管理和代码复用。
二.创建全局安装目录和缓存日志文件目录
在你自己安装的路径里面建两个文件夹，像下面这样，是全局安装目录和缓存日志文件目录。
（我记得这里的创建文件夹需要权限来着，你可以先修改一下权限，在下面的第四部分，也可以等会再修改）
创建完之后打开cmd窗口，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。
执行如下命令：
npm config set prefix "D:\SoftwareDownload\nodejs\node_global"
npm config set cache "D:\SoftwareDownload\nodejs\node_cache"
注意：D:\SoftwareDownload\nodejs是我自己的安装路径，你要换成你自己的
三.配置环境改变量
Windows系统搜索框：查看系统高级设置——系统属——环境变量
对以下自动配置的两个环境变量需要进行修改：
环境变量---用户变量---Path里面的C:\Users\你的用户名\AppData\Roaming\npm
环境变量---系统变量---Path里面的软件安装目录
1、用户变量中的Path编辑前：
修改为 你的安装目录\node_global，编辑后：
2、系统变量——新建
变量名：NODE_PATH
变量值：你的安装目录\node_global\node_modules
D:\SoftwareDownload\nodejs\node_global\node_modules
系统变量——Path添加上%NODE_PATH%
四.修改nodejs权限
修改刚才安装的nodejs的权限，在该文件夹内空白处右键选择属性。
在D盘新建一个vue项目的文件夹，将它的四个权限也全部打开
将权限打开是因为后面使用vue创建项目的时候，需要提供权限才能创建，不然报错有一堆。
五.配置镜像
命令提示符，以管理员身份运行
查看当前镜像
npm config get registry
安装华为云镜像
npm config set registry https://repo.huaweicloud.com/repository/npm/
查看当前镜像，如果输出是https://repo.huaweicloud.com/repository/npm/，说明更改成功。
六.安装vue以及脚手架vue cli
安装vue
npm install vue -g
下载新版本脚手架
npm install -g @vue/cli @vue/cli-service-global
查询版本号，有版本号就是安装成功，现在的版本除非系统太老，不然都是5以上的
vue --version
（一开始我装成旧版本了，服了，创建项目提示版本太老，命令用不了。后面的bug部分会提到我装错的过程）
七.创建项目
Windows系统搜索框，输入Windows PowerShell，以管理员身份运行，不然老说权限不够，烦死了。
创建以及运行
创建项目架子：vue create project-name(项目名不能使用中文)
启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)
输入创建项目的指令，其中demo1是项目名字，不可使使用中文，不可以使用驼峰命名法，可以使用连字符。
vue create demo1
按按向下箭选择vue2，回车：
提供了两个命令，第一个是进入到新创建的项目的文件夹，第二个是运行。
先进入到项目文件夹：
输入运行命令
npm run serve
给了两个网址，选择一个输入浏览器，运行出来是下面的样子，就是创建成功了。
这是使用命令创建项目的完整过程：
简单解释一下能用到的几个文件
将整个创建好的demo1文件拖到VSCode就可以打开了。（我这用的是新建的项目，demo）
新建一个终端，然后输入命令，运行项目
npm run serve
简单介绍：
另外，main.js文件可以进行组件的全局引入，以及项目的运行。
八.脚手架版本装错的过程
安装脚手架，这个是旧版本的，装错了
npm install vue-cli -g
这个是新版本的，就差一个@，离谱
npm install @vue-cli -g
安装完旧版本，创建项目的时候问题来了，安装的版本2.9.6过于老了，需要安装cli3以上的版本
升级npm
npm install -g npm
卸载原版本的vue cli（旧版本的脚手架不带@）
npm uninstall -g vue/cli
卸载新版本的vue cli（反正我用了，不知道自己之前装错的是哪个版本的，全试一遍）
npm uninstall -g @vue/cli
下载新版本
npm install -g @vue/cli @vue/cli-service-global
一套操作下来简直累蒙了，简简单单一下午没了。
九.一些bug
我愿意曾称之为《我在前端那里走过的一路坎坷》，每一个错误都很闹心。
在D盘vue项目文件夹启动右键Windows PowerShell创建文件的时候提示 Error: command failed: npm install --loglevel error --legacy-peer-deps
npm run serve运行项目要求在电脑上选择应用
创建vue项目PowerShell报错无法运行脚本
以后有错误可能会在加上吧，也许。