安装 Node.js、npm 和 Vue.js 的完整教程

以下是安装 Node.js、npm 和 Vue.js 的完整教程:


步骤 1: 安装 Node.js 和 npm

  1. 下载 Node.js

    • 打开 Node.js 官方网站.
    • 选择 LTS 版本(长期支持版本,适合生产环境)。
    • 根据你的操作系统(Windows、macOS 或 Linux)下载对应的安装包。
  2. 安装 Node.js

    • 双击下载的安装包,按照提示完成安装。
    • 安装完成后,Node.js 会自动安装 npm(Node.js 包管理器)。
  3. 验证安装

    • 打开终端(Windows 可以使用 cmd 或 PowerShell)。

    • 输入以下命令以验证是否安装成功:

      bash 复制代码
      node -v

      这会显示 Node.js 的版本号。

      bash 复制代码
      npm -v

      这会显示 npm 的版本号。


步骤 2: 安装 Vue CLI

  1. 全局安装 Vue CLI

    • 使用 npm 安装 Vue.js 命令行工具:

      bash 复制代码
      npm install -g @vue/cli

      如果是 macOS 或 Linux 系统,可能需要添加 sudo

      bash 复制代码
      sudo npm install -g @vue/cli
  2. 验证安装

    • 输入以下命令检查 Vue CLI 是否安装成功:

      bash 复制代码
      vue --version

      这会显示 Vue CLI 的版本号。


步骤 3: 创建一个 Vue 项目

  1. 初始化 Vue 项目

    • 使用 Vue CLI 创建一个新项目:

      bash 复制代码
      vue create my-vue-project
    • 根据提示选择预设(推荐选择默认预设)。

  2. 进入项目目录

    bash 复制代码
    cd my-vue-project
  3. 启动开发服务器

    • 启动 Vue 开发服务器:

      bash 复制代码
      npm run serve
    • 打开浏览器访问 http://localhost:8080,你会看到默认的 Vue 项目页面。


常见问题

  1. npm 速度慢?

    • 使用国内镜像源,比如安装 cnpm

      bash 复制代码
      npm install -g cnpm --registry=https://registry.npmmirror.com
    • 然后用 cnpm 替代 npm

  2. 安装失败或权限不足?

    • 使用 sudo 或确保 npm 配置正确:

      bash 复制代码
      sudo npm install -g @vue/cli

通过上述步骤,你就可以成功安装 Node.js、npm 和 Vue.js

相关推荐
paopaokaka_luck18 分钟前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户38022585982437 分钟前
vue3源码解析:依赖收集
前端·vue.js
实习生小黄1 小时前
express 连接在线数据库踩坑
node.js·express
wzyoung1 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
枣把儿2 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
paopaokaka_luck3 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
一大树3 小时前
Vue3祖孙组件通信方法总结
前端·vue.js
coder_zhx3 小时前
Vue3自定义编程式弹窗
前端·vue.js
独立开阀者_FwtCoder4 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者4 小时前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源