手把手教你创建Vue3项目

再不下课我掀桌了

于 2025-06-13 16:00:46 发布

阅读量669

点赞数 22

CC 4.0 BY-SA版权

文章标签： vue.js 前端框架前端

本文链接：https://blog.youkuaiyun.com/qq_51707024/article/details/148634725

创建 Vue 3 项目的详细步骤

准备工作

安装 Node.js
- 访问 Node.js 官网下载并安装最新 LTS 版本
- 安装完成后，在终端/命令行中运行以下命令验证安装：
```
node -v
npm -v
```

可选：切换 npm 镜像源（国内用户建议设置）

npm config set registry https://registry.npmmirror.com

创建 Vue 3 项目

方法一：使用 Vite（推荐）

安装 Vite 创建工具
```
npm create vite@latest
```
按照提示操作
- 输入项目名称
- 选择框架：Vue
- 选择变体：Vue 或 Vue-ts（如需 TypeScript 支持）
进入项目目录并安装依赖
```
cd your-project-name
npm install
```
启动开发服务器
```
npm run dev
```

方法二：使用 Vue CLI（传统方式）

安装 Vue CLI
```
npm install -g @vue/cli
```
创建项目
```
vue create your-project-name
```
选择配置
- 选择 Manually select features
- 确保选中 Vue 3.x 版本
- 根据需要选择其他功能（如 Router, Vuex, CSS 预处理器等）
进入项目目录并启动
```
cd your-project-name
npm run serve
```

项目结构说明

典型的 Vue 3 项目结构（Vite 创建）：

your-project-name/
├── node_modules/     # 项目依赖
├── public/           # 静态资源
├── src/              # 源代码
│   ├── assets/       # 图片等资源
│   ├── components/   # Vue 组件
│   ├── App.vue       # 根组件
│   └── main.js       # 应用入口文件
├── index.html        # 主 HTML 文件
├── package.json      # 项目配置
└── vite.config.js    # Vite 配置

常用命令

启动开发服务器：npm run dev (Vite) 或 npm run serve (Vue CLI)
生产环境构建：npm run build
预览生产构建：npm run preview (Vite)
运行 lint：npm run lint

可选配置

添加 Vue Router
```
npm install vue-router@4
```
添加 Pinia（状态管理）
```
npm install pinia
```
添加 Element Plus（UI 组件库）
```
npm install element-plus
```

配置别名（在 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')
    }
  }
})