node安装

【二】安装Node.js

【 1 】下载

• 下载网址Node.js — Download Node.js® (nodejs.org)

# https://nodejs.org/en/download/

• 你可以试试源代码

# 下载并安装Node.js
choco install nodejs-lts --version=“20.12.2"

# 验证环境中的Node.js版本是否正确
node -v # 应打印 'v20.12.2'

# 验证环境中的 NPM 版本是否正确
npm -v # 应打印 '10.5.0'

• 我们这里下载安装20.12.2 版本

• 这里安装的版本是要根据你电脑来选择的有些是版本是用不了了的

• 下面就是我血淋淋的教训

• 其中最新版本是可以安装的就是最新的版本可能会有bug不太建议使用

【 2 】 安装

• 选择Add to PATH

• 静待安装成功

• 安装成功

检查是否安装成功

• cmd打开以管理员身份打开

# 下载并安装Node.js
choco install nodejs-lts --version=“20.12.2"

# 验证环境中的Node.js版本是否正确
node -v # 应打印 'v20.12.2'

# 验证环境中的 NPM 版本是否正确
npm -v # 应打印 '10.5.0'

• 创建两个文件夹下创建两个文件夹【node_global】及【node_cache】

5、环境配置（很重要！）

​ 配置环境变量是为了在计算机系统中指定特定的路径或设置，这样可以让系统知道在哪里可以找到特定的可执行文件、库文件或其他资源。配置环境变量可以提高系统的灵活性和可维护性，因为它们可以在系统范围内全局生效，而不需要在每次使用特定应用程序或命令时都手动指定路径。

• 新建 下面两者都可

# npm   

• 这是 npm（Node 包管理器）的帮助信息，它列出了 npm 支持的一系列命令和用法。

【 3 】搭建vue环境

第一步 安装包

# npm install -g @vue/cli # 
'''或者'''

# 装cnpm 这个包---》淘宝提供的--》以后有了它--》装模块 cnpm替代npm

# npm install -g cnpm --registry=https://registry.npmmirror.com

• 可能会发生的错误

 ### 解决方案1：
    // 1. 清空缓存
    npm cache clean --force
    // 2. 关闭SSL验证
    npm config set strict-ssl false
    // 3. 安装
    到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )

    ### 解决方案2：
    // 1. 清空缓存
    npm cache clean --force
    // 2. 切换新源
    npm config set registry https://registry.npmmirror.com
    // 3. 查看源是否设置成功
    npm config get registry
    // 4. 安装
    到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )

• 清除缓存

• 查看源是否设置成功

第二步安装vue脚手架

• 我这里安装的是npm 所以我要安npm install -g @vue/cli

# cnpm install -g @vue/cli
# 或者
# npm install -g @vue/cli

• 这里有个注意事项

安装完成后，可以再次运行以下命令验证 Node.js 和 npm 的版本：

node -v
npm -v

• 这里我就是一个反面教材

如果你遇到了 Node.js 和 npm 版本不正确的问题，需要采取以下步骤：

1. 卸载旧版本的 Node.js 和 npm：

   • 首先，打开控制面板或使用命令行卸载已安装的 Node.js。

   • 在控制面板中，找到已安装的 Node.js 并卸载它。

   • 或者，在命令行中运行以下命令（Windows）：

     npm uninstall -g vue-cli
     npm uninstall -g @vue/cli
     

   

2. 安装最新版本的 Node.js：

   • 前往 Node.js 官方网站 下载最新的稳定版 Node.js 安装程序。
   • 下载后运行安装程序，按照提示完成 Node.js 的安装。

3. 安装 Vue CLI：

   • 安装完 Node.js 后，在命令行中运行以下命令安装 Vue CLI：

     npm install -g @vue/cli
     

4. 验证安装：

   • 安装完成后，可以再次运行以下命令验证 Node.js 和 npm 的版本：

     node -v
     npm -v
     

5. 创建 Vue 项目：

   • 安装完成后，再次尝试运行 vue create myfirstvue 来创建 Vue 项目。

• 注意注意如果还是不行就是环境变量的问题

【 三 】vue基本运行

# npm create vue@latest

• npm install 是 Node.js 中用于安装项目依赖包的命令。当你在一个 Node.js 项目中运行 npm install 命令时，它会查找项目中的 package.json 文件，并安装该文件中列出的所有依赖包及其对应的版本。这通常用于在开始一个新项目或在已有项目中添加新依赖时使用。

# npm run dev   运行脚本文件

PS D:\vue\today01\app01> npm run dev

> app01@0.0.0 dev
> vite


  VITE v5.2.10  ready in 3804 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

这个就是运行本地脚本文件

​ 使用 Vite 作为开发服务器，在本地运行了 npm run dev 或 npm run start（由于你的输出中没有显示实际的命令，只显示了 vite，但通常是运行 vite 的）。Vite 是一个现代化的前端构建工具，用于快速构建现代化的 Web 应用。在你的输出中，Vite 已经成功启动，你可以通过访问 http://localhost:5173/ 来访问你的应用程序。

• 配置启动文件

• npm run serve

【三】常见的问题

• 这个就是编译器的问题

• 报错内容

cnpm install --save vue-router@3.5.3

• 这个错误通常是因为在 HomeView.vue 组件中使用了未定义的 Vue 对象。通常情况下，在 Vue.js 单文件组件中是不需要显式引入 Vue 的，因为 Vue 已经在全局范围内注册了。可能是在 HomeView.vue 组件中的某个地方尝试使用了 Vue，但是却没有正确引入或者 Vue 实例化之前就使用了。

在该vue文件中写入

1. 确保正确引入 Vue： 在 HomeView.vue 的 <script> 标签中，确保正确引入 Vue，例如：

   import Vue from 'vue';
   

2. 检查代码逻辑： 确保在使用 Vue 对象的地方，它已经被正确实例化。通常情况下，Vue 实例是在入口文件（如 main.js）中创建的，然后在组件中通过 import Vue from 'vue' 引入。

3. 避免在 Vue 实例化之前使用 Vue： 确保任何需要使用 Vue 的代码都是在 Vue 实例化之后执行的。如果有一些初始化逻辑需要在 Vue 实例化之前执行，可以考虑将它们放在 created 生命周期钩子中。