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

目标

前端最终样子：

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

创建的有问题没有选择npm

安装插件vue- router (网站需要做路由，多页面的应用)
安装插件vuex (可以在多个组件之间维护同一个数据)

安装依赖bootstrap (可以让程序员做很多美工的工作)
任务栏： build（打包） serve（调试环境）
vue3是鼠标操作，react是命令行操作

去掉url的#号

使用vscode打开项目
vue3是一个前端渲染框架（前端只有在第一次向后端发送请求，后端将所有js文件返回回来，之后再访问页面，不需要重新访问后端，而是重新使用vue渲染出来）
后端渲染框架，每更新一个页面，访问一次后端
每一个vue文件包含三部分：

其中css可以加一个scoped属性意味着其它页面的css文件不会冲突

采用边实现边学的模式：
页面的结构：
一共6和页面

第一步实现导航栏：

删除helloworld.vue
删除aboutView.vue
router/index 删除第二个地址

最后每一个vue组件都会导出属性
（1）name
(2) components
创建第一个vue文件

引入bootstrap组件


需要再安装这个模块，添加依赖搜索这个组件。

这些警告是bootstrap内部的不需要管

bootstrap官网地址：https://v5.bootcss.com/docs/5.1/getting-started/introduction/
搜索navbar

选择自己喜欢的就可以~

复制粘贴到我们创建的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>

第二个组件

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

1. bootstrap找一个框把页面内容框住，实现美化效果；
   card模块
   
   复制到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

到此首页组件完成~

好友列表组件

UserLit.Vue

要写六个页面：

每个页面内容差不多
接下根据地址来显示

需要加上路由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)

---