Vue3——网站整体布局、用户动态页面(上)

目标

前端最终样子:
在这里插入图片描述
Vue3——网站整体布局、用户动态页面(上)_第1张图片

vue国内用的比较多,国外多用react
(1) 在windos上面,安装终端,cmd 或者powershell
(2)安装node环境
(3)安装vue的脚手架 npm i -g @vue/cli 安装不成功是,可能是版本问题
(4) vue ui 不要使用gitbash打开,不然关不掉
(5)vue项目管理器创建一个项目,名称myspace (项目最终类似于贴吧,空间,微博)
(6)过程中不用选择git初始化
创建项目时间有点长

Vue3——网站整体布局、用户动态页面(上)_第2张图片
Vue3——网站整体布局、用户动态页面(上)_第3张图片
创建的有问题没有选择npmVue3——网站整体布局、用户动态页面(上)_第4张图片
Vue3——网站整体布局、用户动态页面(上)_第5张图片

安装插件vue- router (网站需要做路由,多页面的应用)
安装插件vuex (可以在多个组件之间维护同一个数据)
Vue3——网站整体布局、用户动态页面(上)_第6张图片

安装依赖bootstrap (可以让程序员做很多美工的工作)
任务栏: build(打包) serve(调试环境)
vue3是鼠标操作,react是命令行操作
Vue3——网站整体布局、用户动态页面(上)_第7张图片
去掉url的#号Vue3——网站整体布局、用户动态页面(上)_第8张图片

使用vscode打开项目
vue3是一个前端渲染框架(前端只有在第一次向后端发送请求,后端将所有js文件返回回来,之后再访问页面,不需要重新访问后端,而是重新使用vue渲染出来)
后端渲染框架,每更新一个页面,访问一次后端
每一个vue文件包含三部分:
Vue3——网站整体布局、用户动态页面(上)_第9张图片
其中css可以加一个scoped属性意味着其它页面的css文件不会冲突

采用边实现边学的模式:
页面的结构:
![在这里插入图片描述](https://img-blog.csdnimg.cn/d5c74a5bcfd2405a9d6b45f747c77e1a.png =6060)
一共6和页面

第一步实现导航栏:

删除helloworld.vue
删除aboutView.vue
router/index 删除第二个地址
Vue3——网站整体布局、用户动态页面(上)_第10张图片

Vue3——网站整体布局、用户动态页面(上)_第11张图片Vue3——网站整体布局、用户动态页面(上)_第12张图片
Vue3——网站整体布局、用户动态页面(上)_第13张图片
Vue3——网站整体布局、用户动态页面(上)_第14张图片

最后每一个vue组件都会导出属性
(1)name
(2) components
创建第一个vue文件
Vue3——网站整体布局、用户动态页面(上)_第15张图片
引入bootstrap组件
Vue3——网站整体布局、用户动态页面(上)_第16张图片
Vue3——网站整体布局、用户动态页面(上)_第17张图片
需要再安装这个模块,添加依赖搜索这个组件。

Vue3——网站整体布局、用户动态页面(上)_第18张图片
这些警告是bootstrap内部的不需要管

bootstrap官网地址:https://v5.bootcss.com/docs/5.1/getting-started/introduction/
搜索navbar
Vue3——网站整体布局、用户动态页面(上)_第19张图片
选择自己喜欢的就可以~
Vue3——网站整体布局、用户动态页面(上)_第20张图片
复制粘贴到我们创建的navbar.vue文件的template中去

需要引入到根组件中去

第一导航栏完成;
NavBar.vue

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <!-- -fluid去掉会偏向中间一些,导航栏 -->
        <div class="container-fluid">
            <a class="navbar-brand" href="#">MySpace</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">好友列表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">用户动态</a>
                    </li>
                </ul>

                <ul class="navbar-nav ">

                    <li class="nav-item">
                        <a class="nav-link" href="#">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">注册</a>
                    </li>
                </ul>







            </div>
        </div>
    </nav>
</template>

<script>
export default {
    name: "NavBar",
}
</script>

<style scoped>
</style>

第二个组件

Vue3——网站整体布局、用户动态页面(上)_第21张图片

页面实现一般从下往上去写

  1. bootstrap找一个框把页面内容框住,实现美化效果;
    card模块
    Vue3——网站整体布局、用户动态页面(上)_第22张图片
    复制到HomeView.vue文件中template
<template>
  <div class="home">

    <div class="card">
      <!-- <img src="..." class="card-img-top" alt="..."> -->
      <div class="card-body">
        首页
      </div>
    </div>

  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {

  }
}
</script>

在这里插入图片描述








用户列表创建UserLIst.vue文件
复制主页的代码;会发现重复代码很多
创建一个ContenBase.vue组件;把公共部分复制过去








因此公共部分可以使用Content来表示。
涉及到第一个知识点:
一个组件引用另一个组件
被引入的组件如果有一些子元素,
使用属性 会将content所有子元素渲染到slot里面
react使用this。。。children

Vue3——网站整体布局、用户动态页面(上)_第23张图片

在这里插入图片描述
到此首页组件完成~

好友列表组件

UserLit.Vue








要写六个页面:
Vue3——网站整体布局、用户动态页面(上)_第24张图片
每个页面内容差不多
接下根据地址来显示

需要加上路由router/index.js,

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue';
import UserListView from '../views/UserList.vue';
import UserProfileView from '../views/UserProfile.vue'
import LoginView from '../views/LoginView.vue';
import RegisterView from '../views/RegisterView.vue';
import NotFoundView from'../views/NotFoundView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/userlist',
    name: 'userlist',
    component: UserListView
  },
  {
    path: '/userprofile',
    name: 'userprofile',
    component: UserProfileView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/rigister',
    name: 'register',
    component: RegisterView
  },
  //上面/是路径,下面name是名字
  {
    path: '/404',
    name: '404',
    component: NotFoundView
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

---

![在这里插入图片描述](https://img-blog.csdnimg.cn/4add1e31848a4392928d6462e0d7f6db.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/4b9b4b62485243158486a4a073c0142f.png)
UserListView.vue

![在这里插入图片描述](https://img-blog.csdnimg.cn/f718ce03173f4bbe88bd5d10cd72c5d0.png)
**路由实现成功**
![在这里插入图片描述](https://img-blog.csdnimg.cn/e3ab4ee9025b462da5cef2d543238e48.png)
url  : http://localhost:8080/userlist
![在这里插入图片描述](https://img-blog.csdnimg.cn/019e75378c42402998c924a8ecfffa49.png)

http://localhost:8080/404/![在这里插入图片描述](https://img-blog.csdnimg.cn/0077e48961d54923b355003a849c9294.png)

---

你可能感兴趣的