当前位置：首页 > news >正文

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

news 2025/9/17 7:28:43

我来为您提供一个在 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-appecho 环境配置完成！
pause

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