vue3+TS 项目layout布局设置（夹杂了登录功能的代码）

目录

一.目录结构

二.页面内容填写

1.src/components/slideVerify.vue 前端生成验证码

2.src/layout/index.vue （新增页面）布局的入口文件

3.src/layout/components/header.vue（新增页面）页面的头部

4.src/layout/components/footer.vue（新增页面）页面的底部

5.src/router/routers.ts 相关路由添加修改

6.src/views/home/index.vue 修改 进入的首页，里面放些卡片内容

7.src/views/home/components/news.vue（新增页面）首页的新闻

8.src/views/home/components/actions.vue（新增页面）首页的活动

9.src/views/home/components/scrollbar.vue 滚动加载效果

10.src/views/login/index.vue（新增页面）登录的入口文件

11.src/views/login/components/login.vue（新增页面）登录页面

12.src/views/login/components/register.vue（新增页面）注册页面

13.src/views/login/components/findPassword.vue（新增页面）找回密码页面

14.src/views/login/components/imageShow.vue（新增页面）登录这几个页面的图片展示

三.一些全局样式设置

说明

index.css文件内容

myStyle.css文件内容

homeStyle.css 文件内容稍作修改

 style.css 文件内容稍作修改

 myCommponentsStyle.css 文件内容稍作修改

main.ts修改

四.可能需要用到的图像

---

一.目录结构

这里涉及到布局，包含的功能比较多，需要新建的页面比较多，如下

圈起来的都是新增的或是有修改的，需要注意。

最后总体的目录结构

二.页面内容填写

1.src/components/slideVerify.vue 前端生成验证码

2.src/layout/index.vue （新增页面）布局的入口文件

3.src/layout/components/header.vue（新增页面）页面的头部

4.src/layout/components/footer.vue（新增页面）页面的底部

5.src/router/routers.ts 相关路由添加修改

import { RouteRecordRaw } from 'vue-router'

const routes: Array = [
  {
    path: '/',
    redirect: '/index',
    component: () => import('@/layout/index.vue'),
    children: [{
      path: 'index',
      name: 'index',
      component: () => import('@/views/home/index.vue'),
      meta: {
        title: '首页'
      }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/index.vue'),
      meta: {
        title: '登录',
      },
    },
    ]
  }
]
export default routes

6.src/views/home/index.vue 修改 进入的首页，里面放些卡片内容

7.src/views/home/components/news.vue（新增页面）首页的新闻

8.src/views/home/components/actions.vue（新增页面）首页的活动

9.src/views/home/components/scrollbar.vue 滚动加载效果

10.src/views/login/index.vue（新增页面）登录的入口文件

11.src/views/login/components/login.vue（新增页面）登录页面

12.src/views/login/components/register.vue（新增页面）注册页面

13.src/views/login/components/findPassword.vue（新增页面）找回密码页面

14.src/views/login/components/imageShow.vue（新增页面）登录这几个页面的图片展示

三.一些全局样式设置

说明

因为涉及到布局，所以各个页面都有一些全局的样式需要设置

可以直接添加到已经存在的 src/assets/style/style.css 文件

也可以新建一个 src/assets/style/myStyle.css 用来存放我们自己设置的全局样式

以及src/assets/style/index.css 将别的CSS文件引入到这里，然后再修改main.ts里的引入

同时，新增了一些其他样式

目录结构如下

index.css文件内容

/* 自己的CSS文件 
  myStyle.css  一些全局设置
  homeStyle.css  首页相关样式
  myCommponentsStyle.css  一些自定义的样式的枚举
*/
@import url('./myStyle.css'); 
@import url('./homeStyle.css'); 
@import url('./myCommponentsStyle.css'); 

/* 项目搭建后自带的CSS文件 根据需求自行更改 */
@import url('./style.css');

myStyle.css文件内容

/* 网站整体所占宽度 */
.layout_width{
  width: 1250px;
  margin: 0 auto;
}
/* 主体部分布局 */
.main-layout {
  width: 1250px;
  margin: 0 auto;
  margin-top: 10px;
}

.main-layout img{
  width: 1250px;
}

/* a  标签 */
a{
  text-decoration: none;
  color: black;
}

/* 卡片 */
.box-card {
  height: 100%;
}
.box-card-list{
  min-height: 750px;
}

/* 鼠标相关样式 */
.mouse-hover-pointer:hover{
  cursor: pointer;
}
.mouse-hover-default:hover{
  cursor: default
}


/* border  相关 */
.border_left{
  border-left: 1px solid rgba(255, 255, 255, .2);
}
.border_right{
  border-right: 1px solid rgba(255, 255, 255, .2);
}

homeStyle.css 文件内容稍作修改

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 100%;
  height: 540px;
}

.content {}

 .content-pics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

 .content-pics .pic-item img {
  height: 200px;
  width: 300px;
}

 .content-list {}

 .content-list .list-item {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.pic-item:hover,
.list-item:hover .text-middle {
  cursor: pointer;
  text-decoration: underline;
}
.list-item:hover .text-large{
  cursor: pointer;
color: red;
}

.btn {
  display: flex;
  justify-content: end;
}

.btn .button-more {
  padding: 0;
}

 style.css 文件内容稍作修改

/* 设置根元素的全局样式 */
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87); /* 文本颜色 */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-size: 14px;
  padding: 0;
  margin: 0;
  height: 100%;
}

/* 主应用容器样式 */
#app {
  margin: 0 auto;
  text-align: center;
  min-width: 1250px;
  background-color: rgb(239, 239, 239);

}

/* 媒体查询，检测偏好的颜色方案为浅色时 */
@media (prefers-color-scheme: light) {
  :root {
    color: #213547; /* 浅色模式文本颜色 */
    background-color: #ffffff; /* 浅色模式背景颜色 */
  }
  a:hover {
    color: #747bff; /* 浅色模式超链接悬停颜色 */
  }
  button {
    background-color: #f9f9f9; /* 浅色模式按钮背景颜色 */
  }
}

 myCommponentsStyle.css 文件内容稍作修改

/* 字体样式-大小 */
.text-large-up-26 {
  font-size: 26px;
  cursor: default;
}
.text-large-up-24 {
  font-size: 24px;
  cursor: default;
}
.text-large-up-22 {
  font-size: 22px;
  cursor: default;
}
.text-large {
  font-size: 20px;
  cursor: default;
}
.text-middle-up{
  font-size: 18px;
  cursor: default;
}
.text-middle{
  font-size: 16px;
  cursor: default;
}
.text-middle-down{
  font-size: 14px;
  cursor: default;
}
.text-small{
  font-size: 12px;
  cursor: default;
}
/* 分割线 */
.my-divider-black-large{
  width: 100%;
  border: 2px solid black;margin: 10px 0;
}
.my-divider-black-middle{
  width: 100%;
  border: 1.5px solid black;margin: 10px 0;
}
.my-divider-black-small{
  width: 100%;
  border: 1px solid black;margin: 5px 0;
}

.my-divider-grey-large{
  width: 100%;
  border: 2px solid rgb(228, 231, 237);margin: 10px 0;
}
.my-divider-grey-middle{
  width: 100%;
  border: 1.5px solid rgb(228, 231, 237);margin: 10px 0;
}
.my-divider-grey-small{
  width: 100%;
  border: 1px solid rgb(228, 231, 237);margin: 5px 0;
}

main.ts修改

import '@/assets/style/style.css'
更改为
import '@/assets/style/index.css'

 

四.可能需要用到的图像

footer.vue 底部使用的 /assets/images/share_icon.png

其他几张图片

pic1.jpg

sport3.jpg