用户中心Vue3网页开发（1.0版）

这个用户中心项目是由完整的前后端组成，涉及到Vue3+SpringBoot，今天先来带你了解前端网页开发的流程。

建议大家可以后端开发完毕或者有一个现成的后端模版后再来开发前端项目，不然功能测试起来会有些麻烦，需要自己造一些假数据，缺乏实际业务情景下的真实感。

在正式coding之前我们先从结构和功能上初步了解一下这个项目。

目录

一、项目框架介绍

1.功能

2.结构

二、正式开发前的一些准备

1.了解以下我们在开发过程中需要使用到的工具

2.环境准备

3.项目初始化

4.什么是脚手架

5.ant design vue组件库

6.一些开发规范

网页实战详见下一篇，持续更新ing...

---

一、项目框架介绍

1.功能

这里介绍我们项目实现后网页具备了什么功能？既然是用户中心项目那我们的核心自然是基于“用户类”的基础上来对网站进行设计，我们对于用户中心我们的网站最基本要具备以下三个功能：

• 1.0 用户登录 USER_LOGIN
• 2.0 用户注册 USER_REGISTER
• 3.0 用户管理 USER_MANAGEMENT

在此基础之上可以后续在进行功能上的丰富。

2.结构

在个人自行搭建网站的过程中我们可以逐步见识到Vue3项目的框架结构，但我选择让大家先行了解我们最终接近成品的项目应具备的结构框架，通过目录的分类来方便大家理解前端。

由外及里先展示一下项目的目录，可能还存在一些多余的目录结构没有删去，会逐步向大家一一介绍。

用户中心前端项目目录结构

整体目录结构

用户中心前端vue项目 dist 作用：存放项目构建后的生产环境代码 内容 经过压缩、优化的静态资源（HTML/CSS/JS） 自动生成的 index.html 入口文件 静态资源（如图片/字体）会被哈希命名并放入 assets 子目录 特点 由 npm run build 命令自动生成 可直接部署到 Web 服务器（如 Nginx） 不应手动修改，每次构建会覆盖 node_modules 作用：存储所有第三方依赖包 内容 根据 package.json 中的 dependencies 和 devDependencies 自动安装 包含 Vue 核心库、插件、Babel、Webpack 等工具链 特点 永远不要提交到 Git（应在 .gitignore 中忽略） 可通过 npm install 或 yarn install 重新生成 目录体积通常很大（数百MB） public 作用：存放无需构建的静态资源 src 作用：项目核心源代码目录 核心配置文件 如README项目说明文档、vue.config.js-Vue CLI 项目的自定义配置文件、.gitignore指定 Git 版本控制忽略的文件/目录

src目录结构

api 作用：集中管理所有后端接口请求 assets 存放各类图片资源 components 通用组件，如导航条或底部栏 layouts 通用布局往往需要引入使用通用组件 Pages 按照用户/管理员可见对目录进行二次分配 存放不同页面对应着不同的内容 router 路由配置，定义各个页面组件在浏览器中对应的URL是什么 store 用户状态的获取与管理 其他

简单的先回答大家可能会有的疑问：

Q:layout布局和pages页面为什么单独独立为两个目录呢？感觉这两个都是一个东西啊？

A:我们如果把页面比作一本书：

• 那么layouts/ 相当于书的 装帧和版式（固定不变的封面、页眉页脚）

• pages/ 则相当于书的 章节内容（每页不同的文字和图片）

二、正式开发前的一些准备

1.了解以下我们在开发过程中需要使用到的工具

1. vue3：渐进式开发更适合新手，三件套分开

2. Vue-CLI脚手架:（似乎有些过时？）

   1. Vue Command Line Interface：是一个基于 Vue.js 快速开发的完整系统。它通过提供交互式的项目脚手架和一系列可选插件，帮助开发者快速搭建和管理 Vue.js 项目。Vue CLI 的核心是提高开发效率，它通过标准化工具和配置来简化项目的设置过程，让开发者能够专注于编写应用代码。

3. Ant Design 组件库：减轻样式上的负担，提供了很多现成可复用的组件模版

4. axious请求库：兼容浏览器端、nodejs端，可以让前端向后端发送请求

5. Pinia状态管理：全局状态的维护

6. 前端工程化：eslint、prettier、ts 开发规范

2.环境准备

（1）nodejs安装

1. 下载 | Node.js 中文网https://nodejs.cn/download/

（2）vue-CLI 安装：使用npm

1. Vue CLIhttps://cli.vuejs.org/zh/

3.项目初始化

（1）在需要创建项目的文件夹下打开cmd输入vue create project_name

如vue create user_center_frontend_vue,进行项目初始化

（2）选上这四个选项（按空格进行勾选），还有一些其他选项的勾选

（3）脚手架加载完成后可以在vscode中打开即可

后端的maven和前端的npm有很多相似之处

（4）配置好nodejs后再package.json文件中run serve即可，展示如图的界面

（5）开发规范

eslint和prettier，在setting设置中分别搜索这两个，eslint勾选自动使用配置，默认会对js、ts、jsx、tsx、html、vue文件生效，prettier选择人工配置选择脚手架安装的prettier包，勾选格式化代码的选项 。

4.什么是脚手架

脚手架在开发中用于快速生成项目基础结构的工具，就像建筑工地搭建的临时支架一样，它为项目提供初始框架和配置，帮助开发者省去重复性工作。

1. 一键生成项目骨架

   1. 自动创建标准化的目录结构

   2. 预置配置文件（如 package.json、webpack.config.js）

   3. 示例代码（如 main.js、App.vue）

2. 内置最佳实践

   1. 集成主流工具链（Webpack/Babel/ESLint）

   2. 配置好开发/生产环境优化

   3. 预装常用依赖（axios, router, state管理等）

3. 标准化团队开发

   1. 统一技术栈和代码规范

   2. 减少新人上手成本

这里如果有兴趣的小伙伴可以额外去了解一下vite和vue cli的差异之处

5.ant design vue组件库

1.如何引入

在当前项目下输入命令npm i --save ant-design-vue@4.x

2.注册组件

全局完整注册，复制粘贴到main.js（Vue 项目的核心入口文件，负责初始化 Vue 应用并挂载到 DOM）文件里

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';const app = createApp(App);app.use(Antd).mount('#app');

main.ts 是 Vue 应用的神经中枢，负责整合所有插件和配置，最终将应用渲染到页面。

最后只需要根据需求，比如需要什么样的按钮就可以直接复制相关的代码。

6.一些开发规范

现在更多的选择写组合式api而不是选项式api

单个vue页面的构成部分

• template标签里写html
• style标签里写css
• script标签里写js

<template></template><style scoped></style><script setup lang="ts"></script>

网页实战详见下一篇，持续更新ing...