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

Vue 项目创建教程（开发前的准备工作保姆级辅助文档）

web 2025/7/14 18:09:09

Vue 项目创建教程
以下是快速创建 Vue 项目的步骤和对应命令，方便你快速回忆和复制使用。
一、环境检查
首先需要确认你的开发环境中已安装 Node.js、npm 和 Vue CLI。在终端中执行以下命令查看版本：

# 检查Node.js版本（需v14+）
node -v# 检查npm版本（需v6+）
npm -v# 检查Vue CLI版本（需v4+）
vue --version二、安装或更新 Vue CLI
如果尚未安装 Vue CLI，或需要更新到最新版本，执行以下命令：
bash
# 安装Vue CLI（全局安装）
npm install -g @vue/cli# 或更新Vue CLI到最新版本
npm update -g @vue/cli三、设置 npm 镜像源（可选但推荐）
国内网络环境下，建议使用淘宝 npm 镜像以加速依赖下载：
bash
# 设置淘宝npm镜像
npm config set registry https://registry.npmmirror.com# 验证镜像设置
npm config get registry
如需恢复官方源，执行：
bash
npm config set registry https://registry.npmjs.org
四、创建 Vue 项目
使用 Vue CLI 创建新项目：
bash
# 创建Vue项目（选择默认配置）
vue create my-vue-project# 或使用交互式选项创建（推荐）
vue create --default my-vue-project
五、启动开发服务器
项目创建完成后，进入项目目录并启动开发服务器：
bash
# 进入项目目录
cd my-vue-project# 启动开发服务器
npm run serve

六、项目结构概览
创建后的项目基本结构如下：
plaintext
my-vue-project/
├── node_modules/ # 依赖模块
├── public/ # 静态资源
│ ├── index.html # 主HTML模板
│ └── favicon.ico # 网站图标
├── src/ # 源代码
│ ├── assets/ # 资源文件
│ ├── components/ # 组件目录
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── router/ # 路由配置
│ └── store/ # Vuex状态管理
├── .gitignore # Git忽略配置
├── babel.config.js # Babel配置
├── package.json # 项目配置
└── README.md # 项目说明
七、常见问题解决方案
安装依赖缓慢：使用 cnpm 或设置 npm 镜像
Vue CLI 版本不兼容：卸载后重新安装最新版本
ESLint 校验失败：修改.eslintrc.js配置或使用–no-eslint选项创建项目
以上步骤可以帮助你快速搭建一个基础的 Vue 项目。根据项目需求，你可以进一步配置路由、状态管理、UI 组件库等功能。