用户管理系统 07 项目前端初始化 | 新手实战 | 期末实训 | Java+SpringBoot+Vue

用户管理系统 07 项目前端初始化 | 新手实战 | 期末实训 | Java+SpringBoot+Vue

B站视频教程：https://space.bilibili.com/3493114532596161/lists/6609623?type=season

关注B站"90后小陈老师 "，私信回复"Java"获取资料！

手把手教你从零搭建Vue3前端项目，为Java新手量身定制的前端入门指南

本文是用户管理系统实战系列的第七篇，专为Java新手设计。很多Java后端开发者在学习前端时都会感到困惑，本文将用最简单的方式带你完成前端项目初始化，采用MVP最小架构原则，让你轻松上手前后端分离开发。

🎯🎯🎯 本章学习目标

• ✅ 掌握Vue3项目创建和配置
• ✅ 学会Ant Design Vue组件库引入
• ✅ 理解前端项目结构设计
• ✅ 完成基础布局和路由配置

🛠️ 开发环境准备

必备软件清单

软件	版本	作用	下载方式
Node.js	18.x+	JavaScript运行环境	官网下载
Vue CLI	5.x	Vue项目脚手架	通过npm安装
WebStorm	2023.x	前端开发IDE	官网下载

环境验证命令

# 检查Node.js安装
node --version
# 检查npm安装  
npm --version
# 检查Vue CLI安装
vue --version

🚀 前端项目创建步骤

1. 创建Vue3项目

使用Vue CLI创建项目：

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

# 安装Vue CLI脚手架
npm install -g @vue/cli@5.0.8

# 创建项目（项目名：user-center-frontend）
vue create user-center-frontend

项目配置选择：

? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
❯ Default ([Vue 2] babel, eslint) 
  Manually select features

选择 Manually select features，然后选择以下特性：

◉ Babel                   # JavaScript编译器
◉ TypeScript              # 类型支持
◉ Router                   # 路由管理
◯ Vuex                     # 状态管理（不选，我们用Pinia）
◉ CSS Pre-processors      # CSS预处理器
◉ Linter / Formatter      # 代码规范
◯ Unit Testing            # 单元测试（新手可选）
◯ E2E Testing             # 端到端测试（新手不选）

详细配置：

? Choose a version of Vue.js that you want to start the project? 
❯ 3.x

? Use class-style component syntax? No

? Use Babel alongside TypeScript? Yes

? Use history mode for router? Yes

? Pick a CSS pre-processor: Sass/SCSS

? Pick a linter / formatter config: 
  ESLint with error prevention only 
❯ ESLint + Prettier           # 代码格式化和规范

? Pick additional lint features: 
❯◉ Lint on save              # 保存时检查
 ◯ Lint and fix on commit     # 提交时修复

? Where do you prefer placing config for Babel, ESLint, etc.? 
❯ In dedicated config files  # 专用配置文件

2. 项目结构解析

创建完成后，项目结构如下：

user-center-frontend/
├── public/                 # 静态资源目录
│   └── index.html         # HTML模板
├── src/                   # 源代码目录
│   ├── assets/           # 静态资源（图片、样式等）
│   ├── components/       # 可复用组件
│   ├── router/           # 路由配置
│   ├── views/            # 页面组件
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── package.json          # 项目配置和依赖
└── vue.config.js         # Vue配置文件

3. 基础配置调整

修改端口配置（vue.config.js）：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  // 设置开发服务器
  devServer: {
    port: 3000, // 前端开发端口
    open: true, // 自动打开浏览器
  },
  // 代码检查配置（新手友好）
  lintOnSave: 'warning'
})

启动项目测试：

cd user-center-frontend
npm run serve

访问 http://localhost:3000看到Vue欢迎页面说明项目创建成功！

🎨 引入Ant Design Vue组件库

1. 安装Ant Design Vue

# 进入项目目录
cd user-center-frontend

# 安装Ant Design Vue
npm install ant-design-vue@4.x --save

2. 全局引入配置

修改main.ts文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 引入Ant Design Vue
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css' // 引入样式

const app = createApp(App)

app.use(router)
app.use(Antd) // 使用Ant Design Vue

app.mount('#app')

3. 测试组件引入

修改App.vue文件：

<template>
  <div id="app">
    <a-card title="前端初始化测试" style="width: 500px; margin: 50px auto">
      <a-space direction="vertical" style="width: 100%">
        <a-button type="primary">主要按钮</a-button>
        <a-button>默认按钮</a-button>
        <a-alert message="Ant Design Vue 引入成功！" type="success" />
      </a-space>
    </a-card>
  </div>
</template>

<script setup lang="ts">
// 使用Composition API
console.log('前端项目初始化完成！')
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

🏗️ 项目结构优化

1. 创建标准化目录结构

src/
├── api/           # API接口定义
├── components/    # 公共组件
├── views/         # 页面组件
├── router/        # 路由配置
├── store/         # 状态管理
├── utils/         # 工具函数
├── assets/        # 静态资源
└── types/         # 类型定义

手动创建这些目录：

cd src
mkdir api components views store utils types

2. 配置基础路由

修改router/index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

// 定义路由配置
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/HomeView.vue')
  },
  {
    path: '/user/login',
    name: 'Login',
    component: () => import('@/views/UserLogin.vue')
  },
  {
    path: '/user/register', 
    name: 'Register',
    component: () => import('@/views/UserRegister.vue')
  },
  {
    path: '/admin/userManage',
    name: 'UserManage',
    component: () => import('@/views/UserManage.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3. 创建基础页面组件

创建views/HomeView.vue：

<template>
  <div class="home-container">
    <a-page-header title="用户管理系统" sub-title="前端初始化演示">
      <template #extra>
        <a-space>
          <a-button type="primary" @click="$router.push('/user/login')">
            用户登录
          </a-button>
          <a-button @click="$router.push('/user/register')">
            用户注册
          </a-button>
        </a-space>
      </template>
      
      <a-card title="项目特性">
        <a-list item-layout="horizontal">
          <a-list-item>
            <a-list-item-meta
              title="Vue3 Composition API"
              description="使用现代Vue3组合式API开发"
            />
          </a-list-item>
          <a-list-item>
            <a-list-item-meta
              title="TypeScript支持"
              description="完整的类型支持，开发更可靠"
            />
          </a-list-item>
          <a-list-item>
            <a-list-item-meta
              title="Ant Design Vue"
              description="企业级UI组件库，界面美观"
            />
          </a-list-item>
        </a-list>
      </a-card>
    </a-page-header>
  </div>
</template>

<script setup lang="ts">
// 使用Composition API
import { onMounted } from 'vue'

onMounted(() => {
  console.log('Home页面加载完成')
})
</script>

<style scoped>
.home-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
</style>

创建其他基础页面：

在views目录下创建：

• UserLogin.vue- 用户登录页面
• UserRegister.vue- 用户注册页面
• UserManage.vue- 用户管理页面

🔧 开发工具配置

1. 代码格式化配置

.prettierrc（代码格式化规则）：

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

2. 开发调试技巧

浏览器开发者工具使用：

1. F12 打开开发者工具
2. Console 标签查看日志
3. Elements 标签检查DOM结构
4. Network 标签监控网络请求

🎯 新手常见问题解答

❓ Vue2和Vue3有什么区别？

答：Vue3使用Composition API，代码组织更灵活，性能更好，对TypeScript支持更完善。

❓ 为什么要用TypeScript？

答：TypeScript提供类型检查，可以在编码阶段发现错误，适合大型项目开发。

❓ 前端项目也要分层吗？

答：是的！前端也需要良好的目录结构，便于代码维护和团队协作。

❓ 如何调试前端代码？

答：可以使用浏览器开发者工具，配合console.log和debugger语句。

📊 项目验证清单

完成本章学习后，请检查以下项目：

• Vue3项目创建成功
• 开发服务器正常启动（localhost:3000）
• Ant Design Vue组件正常显示
• 路由配置正确，页面可以跳转
• 代码格式化配置生效
• 项目目录结构清晰

🚀 立即动手实践

操作步骤：

1. 环境准备：安装Node.js和Vue CLI
2. 项目创建：执行vue create命令创建项目
3. 依赖安装：引入Ant Design Vue组件库
4. 配置调整：修改端口和代码规范配置
5. 结构搭建：创建标准目录结构
6. 功能验证：测试基础页面和路由

预期效果：

完成本章实践后，你将拥有一个完整的前端项目基础框架，包含：

• Vue3 + TypeScript开发环境
• Ant Design Vue UI组件库
• 路由导航系统
• 代码规范配置

🌟 学习要点总结

✅ 技术栈掌握

1. Vue3项目创建 - 脚手架工具使用
2. 组件库引入 - Ant Design Vue配置
3. 路由管理 - 前端页面导航
4. 开发环境 - 调试和格式化

💡 架构思维培养

1. 项目结构设计 - 目录规划思维
2. 配置管理 - 环境配置重要性
3. 组件化思想 - 前端开发核心理念

🎯 实战价值

这个前端基础框架可以直接用于后续功能开发，为你学习全栈开发打下坚实基础！

📌 下一篇预告

第八篇：项目前端页面开发

---

💫 本章总结

通过本章学习，我们完成了前端项目的初始化工作：

✅ 环境搭建成果

1. 开发环境配置 - Node.js + Vue CLI
2. 项目创建 - Vue3 + TypeScript技术栈
3. UI组件库引入 - Ant Design Vue集成
4. 项目结构规划 - 标准化目录设计

💡 新手成长收获

1. 前端开发入门 - 理解前端项目结构
2. 工具链使用 - 掌握现代前端开发工具
3. 配置管理能力 - 学会项目环境配置
4. 调试技巧 - 前端问题排查方法

🚀 项目进展

现在我们已经拥有了一个完整的前端项目基础，下一章将开始实现具体的业务功能！

---

💬 互动话题：作为Java开发者，你在学习前端时遇到的最大困难是什么？欢迎在评论区分享你的学习体验！

🚀 行动建议：按照文章步骤亲手搭建项目，遇到问题随时提问！

---

关注B站"90后小陈老师 "，私信回复"Java"获取资料！