从 Node.js 安装到 Vue 3 开发环境搭建

weixin_45690427

631人浏览 · 2025-09-17 08:39:53

weixin_45690427 · 2025-09-17 08:39:53 发布

我来为您提供一个在 Windows 10 系统上搭建 Vue 3 开发环境的详细教程。

一、安装 Node.js

1.1 下载 Node.js

访问 Node.js 官网：https://nodejs.org/
下载 LTS 版本（长期支持版，更稳定）
建议选择 .msi 安装包

1.2 安装步骤

双击下载的安装包
点击 “Next” 进入下一步
接受协议，点击 “Next”
选择安装路径（建议默认路径）
选择安装组件（保持默认即可）
点击 “Install” 开始安装
安装完成后点击 “Finish”

1.3 验证安装

打开命令提示符（Win+R，输入 cmd）或 PowerShell，输入：

node -v
npm -v

如果显示版本号，说明安装成功。

二、配置 npm 镜像源

2.1 配置淘宝镜像源（推荐）

方法一：直接设置 npm 镜像

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

# 验证是否设置成功
npm config get registry

方法二：使用 cnpm（淘宝 npm 镜像）

# 全局安装 cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

# 使用 cnpm 代替 npm
cnpm -v

2.2 其他常用国内镜像源

# 腾讯云镜像
npm config set registry https://mirrors.cloud.tencent.com/npm/

# 华为云镜像
npm config set registry https://repo.huaweicloud.com/repository/npm/

# 阿里云镜像
npm config set registry https://registry.npmmirror.com

# 切换回官方源
npm config set registry https://registry.npmjs.org/

2.3 使用 nrm 管理镜像源（推荐）

# 全局安装 nrm
npm install -g nrm

# 查看可用镜像源
nrm ls

# 切换镜像源
nrm use taobao  # 使用淘宝镜像
nrm use npm     # 切回官方源

# 测试镜像源速度
nrm test

# 查看当前使用的镜像源
nrm current

三、配置私服镜像源

3.1 配置企业私服（以 Nexus 为例）

# 设置私服地址
npm config set registry http://your-nexus-server:8081/repository/npm-group/

# 设置认证信息
npm config set always-auth true
npm config set _auth "用户名:密码的base64编码"

# 或者使用 npm login
npm login --registry=http://your-nexus-server:8081/repository/npm-group/

3.2 配置 .npmrc 文件

在项目根目录或用户目录创建 .npmrc 文件：

# 默认镜像源
registry=https://registry.npmmirror.com/

# 私服配置
@company:registry=http://your-nexus-server:8081/repository/npm-group/

# 认证信息
//your-nexus-server:8081/repository/npm-group/:_authToken=YOUR_TOKEN

# 特定包的镜像源
sass_binary_site=https://npmmirror.com/mirrors/node-sass/
electron_mirror=https://npmmirror.com/mirrors/electron/

四、安装 Vue 3 脚手架

4.1 安装 Vue CLI（传统方式）

# 全局安装 Vue CLI
npm install -g @vue/cli

# 验证安装
vue --version

# 创建 Vue 3 项目
vue create my-vue3-project

# 选择 Vue 3 preset

4.2 使用 Vite（推荐，更快速）

# 使用 npm
npm create vite@latest my-vue3-app -- --template vue

# 使用 yarn
yarn create vite my-vue3-app --template vue

# 使用 pnpm
pnpm create vite my-vue3-app --template vue

# 进入项目目录
cd my-vue3-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

4.3 使用 create-vue（官方推荐）

# 创建项目
npm create vue@latest

# 按提示选择配置：
# ✔ Project name: … my-vue3-project
# ✔ Add TypeScript? … No / Yes
# ✔ Add JSX Support? … No / Yes
# ✔ Add Vue Router for Single Page Application development? … No / Yes
# ✔ Add Pinia for state management? … No / Yes
# ✔ Add Vitest for Unit Testing? … No / Yes
# ✔ Add an End-to-End Testing Solution? › No
# ✔ Add ESLint for code quality? … No / Yes
# ✔ Add Prettier for code formatting? … No / Yes

# 进入项目并安装依赖
cd my-vue3-project
npm install
npm run dev

五、安装 Vue 开发常用包

5.1 核心库

# Vue Router（路由）
npm install vue-router@4

# Pinia（状态管理，Vuex 的替代品）
npm install pinia

# Vuex（传统状态管理）
npm install vuex@next

5.2 UI 组件库

# Element Plus
npm install element-plus

# Ant Design Vue
npm install ant-design-vue@next

# Vant 4（移动端）
npm install vant

# Naive UI
npm install naive-ui

# Arco Design Vue
npm install @arco-design/web-vue

5.3 开发工具

# Axios（HTTP 请求）
npm install axios

# Sass/Scss
npm install -D sass

# Less
npm install -D less

# TypeScript
npm install -D typescript @vue/tsconfig

# ESLint + Prettier
npm install -D eslint prettier eslint-plugin-vue eslint-config-prettier

# Tailwind CSS
npm install -D tailwindcss postcss autoprefixer

# VueUse（组合式 API 工具集）
npm install @vueuse/core

5.4 构建优化工具

# 自动导入
npm install -D unplugin-auto-import unplugin-vue-components

# 图标
npm install -D unplugin-icons @iconify/json

# 压缩
npm install -D vite-plugin-compression

# 打包分析
npm install -D rollup-plugin-visualizer

六、项目配置示例

6.1 package.json 示例

{
  "name": "my-vue3-app",
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write ."
  },
  "dependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.2.5",
    "pinia": "^2.1.7",
    "axios": "^1.6.0",
    "element-plus": "^2.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^5.0.0",
    "sass": "^1.69.0",
    "eslint": "^8.56.0",
    "prettier": "^3.1.0"
  }
}

6.2 vite.config.js 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

七、常见问题解决

7.1 npm 安装速度慢

# 清除缓存
npm cache clean --force

# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com

7.2 权限问题

# 以管理员身份运行 PowerShell
# 设置执行策略
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

7.3 版本管理

# 安装 nvm-windows（Node 版本管理器）
# 下载地址：https://github.com/coreybutler/nvm-windows

# 使用 nvm 管理 Node 版本
nvm list available  # 查看可用版本
nvm install 18.19.0  # 安装指定版本
nvm use 18.19.0     # 使用指定版本
nvm list            # 查看已安装版本

八、快速启动脚本

创建一个 setup.bat 文件，一键配置环境：

@echo off
echo 正在配置 Vue 开发环境...

REM 配置淘宝镜像
call npm config set registry https://registry.npmmirror.com
echo npm 镜像已配置为淘宝镜像

REM 安装全局工具
call npm install -g @vue/cli
call npm install -g create-vite
call npm install -g nrm
echo 全局工具安装完成

REM 创建 Vue 3 项目
call npm create vue@latest my-vue3-app

echo 环境配置完成！
pause

这个教程涵盖了从 Node.js 安装到 Vue 3 开发环境搭建的完整流程。根据实际需求，您可以选择性地安装和配置相关工具和包。