环境配置过程与问题

Vue配置流程

nvm -> Node.js + npm -> Vue CLI
  • nvm是什么？
    nvm（node.js version management），是一个node.js的版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。
  • 直接安装node也行，但是vue框架中有不少项目对应的node版本会有不同，而且在切换项目时也可能改变，所以尽量还是用nvm来管理nodejs的版本

安装node

安装版本

image-20240304193628399

ps：这有个坑，要留意版本号，与后续开发过程中的框架版本需要对应

检查原来有无Node

  • 方法:
    1. 在 Windows 的开始界面找Node.js的卸载程序
    2. 在 Windows 上，使用 “添加或删除程序” 功能来卸载 Node.js。
    3. 直接找到Node.js的文件夹全部删除

下载nvm

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

  • 推荐下载带有setup的安装版，其他版本可能需要配置

image-20240304191110898

  • 安装没有特别需要注意的，一路next就行，其中两个路径分别是nvm安装路径和后续node的安装路径

确认安装

  • 检查安装版本

    1
    nvm -v

  • 安装对应node

    1
    nvm install version

    如:

    1
    nvm install 14.19.0

  • 选择版本

    • nvm list或nvm ls查看安装的版本 （在版本前有*标记的说明被选用）

    • 选择版本:

      1
      nvm use <version>

      如:

      1
      nvm use 14.19.0

  • 验证 Node.js 版本： 运行以下命令验证已选择的 Node.js 版本：

    1
    2
    node -v
    npm -v

安装Vue CLI

Vue CLI：Vue CLI是一个用于快速搭建Vue.js项目的命令行工具。它提供了一整套的开发工具，包括项目脚手架、开发服务器、构建工具等，帮助开发者更容易地创建、开发和维护Vue.js项目。Vue CLI还提供了可扩展的插件系统，可以根据项目需要进行定制和扩展。

安装Vue CLI

  • 在命令行中运行以下命令：
1
npm install -g @vue/cli

这会在全局范围内安装Vue CLI。使用-g标志将Vue CLI安装为全局包，这样就可以从任何位置访问它。

  • 安装完成后，可以通过以下命令验证Vue CLI是否成功安装：
    1
    vue --version
    ​ 如果成功安装，将显示Vue CLI的版本号。
    image-20240304193200739