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

|----------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------------|
| | | |
[用户中心前端项目目录结构]

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

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

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

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

那么layouts/ 相当于书的装帧和版式（固定不变的封面、页眉页脚）
pages/ 则相当于书的章节内容（每页不同的文字和图片）

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

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

vue3：渐进式开发更适合新手，三件套分开
Vue-CLI脚手架:（似乎有些过时？）
1. Vue Command Line Interface：是一个基于 Vue.js 快速开发的完整系统。它通过提供交互式的项目脚手架和一系列可选插件，帮助开发者快速搭建和管理 Vue.js 项目。Vue CLI 的核心是提高开发效率，它通过标准化工具和配置来简化项目的设置过程，让开发者能够专注于编写应用代码。
Ant Design 组件库：减轻样式上的负担，提供了很多现成可复用的组件模版
axious请求库：兼容浏览器端、nodejs端，可以让前端向后端发送请求
Pinia状态管理：全局状态的维护
前端工程化：eslint、prettier、ts 开发规范

2.环境准备

（1）nodejs安装

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

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

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. 自动创建标准化的目录结构
2. 预置配置文件（如 package.json、webpack.config.js）
3. 示例代码（如 main.js、App.vue）
内置最佳实践
1. 集成主流工具链（Webpack/Babel/ESLint）
2. 配置好开发/生产环境优化
3. 预装常用依赖（axios, router, state管理等）
标准化团队开发
1. 统一技术栈和代码规范
2. 减少新人上手成本

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

5.ant design vue组件库

1.如何引入

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

2.注册组件

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

javascript 复制代码

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

html 复制代码

<template>

</template>

<style scoped>

</style>

<script setup lang="ts">

</script>