Vue3——网站整体布局、用户动态页面（上）_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">
        
1
2