前端vue论坛项目(七)------构建 UserProfileView 用户页面

最新推荐文章于 2024-08-27 16:58:53 发布

快乐平凡的小熙

最新推荐文章于 2024-08-27 16:58:53 发布

阅读量922

点赞数 2

分类专栏： vue框架文章标签：前端

本文链接：https://blog.csdn.net/QDQE232/article/details/126196605

版权

vue框架专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用Vue.js和Bootstrap构建一个用户个人资料页面，包括页面组件划分、个人信息展示、响应式图片处理及历史发帖组件的实现。通过组件化开发，实现了页面的模块化布局，确保了页面在不同设备上的自适应效果。

摘要由CSDN通过智能技术生成

这个页面做好了以后会是一个怎样的效果呢？

整个页面很大，该分为那几个组件去实现呢？

怎么去实现UserProfileInfo(个人信息)这个组件呢？

如何实现框架的整体布局？

如何实现图片的大小的自适应(响应时图片)？

如何实现历史发帖(UserProfilePosts)这个组件呢？

怎么去实现其框架呢？

这个页面做好了以后会是一个怎样的效果呢？

~~好看吧~~

整个页面很大，该分为那几个组件去实现呢？

把页面分为三个组件，分模块去实现。各模块的情况如上图。

问题一：vue框架下的组件存放在哪一个文件夹下？

答：components文件夹，这是vue自己设定好的。如下图，

怎么去实现UserProfileInfo(个人信息)这个组件呢？

如何实现框架的整体布局？

首先，设计一个大致的框架，如下

注意：html标签里面的字体的基础默认的大小是16px。

问题二：如何实现上述框架的布局的呢？

答：利用bootstrap中的grid。

根据我们的需求把bootstrap上面的代码改成这样。
<div class="row">
        <div class="col-3">  
        头像          
        </div>
        <div class="col-9 ">
        个人的信息           
        </div>
    </div>

如何实现图片的大小的自适应(响应时图片)？

解决方案：在bootstrap中搜索images关键字

如何实现历史发帖(UserProfilePosts)这个组件呢？

怎么去实现其框架呢？

步骤一：在UserProfilePosts.vue的文件中，沿用之前bootstrap里面的card。

<template>
    <div class="card">
        <div class="card-body">
          
        </div>
    </div>
</template>

<script>
export default {
    name: "UserProfilePosts",

}
</script>

<style scoped>
</style>

步骤二：在UserProfile.vue的文件里面引入相关的组件

<template>
  <ContentBase>
    <div class="row">
      <div class="col-3">
        <UserProfileInfo />
      </div>
      <div class="col-9">
        <UserProfilePosts />

      </div>
    </div>
  </ContentBase>
</template>

<script>
import ContentBase from '../components/ContentBase';
import UserProfileInfo from '../components/UserProfileInfo';
import UserProfilePosts from '../components/UserProfilePosts';//组件的引用

export default {
  name: "UserListView",
  components: {
    ContentBase,
    UserProfileInfo,
    UserProfilePosts//组件的引用
  }
}
</script>

<style scoped>
</style>