Vue驾校-从项目学Vue-2

starnight531

已于 2022-07-12 17:44:49 修改

阅读量310

点赞数 4

分类专栏： # Vue驾校文章标签： vue.js javascript vue 前端框架 java

于 2022-07-11 00:49:49 首次发布

本文链接：https://blog.csdn.net/buptsd/article/details/125704844

版权

Vue驾校专栏收录该内容

7 篇文章 2 订阅

订阅专栏

前言：

往期Vue框架内容：Vue驾校-从项目学Vue-1
算法系列博客友链：神机百炼
强烈推荐Y总所有课程：小白友好的程序教学社区

代码实战

1. 删除默认组件：

确定删除部分：

通过main.js文件查看，我们发现Vue实现前端的逻辑：

createApp(Vue组件名).use(Vuex-store目前为空).use(Vue-router路由).mount('html标签')

其中Vue组件内部又可以在html部分，通过标签引入其余Vue组件
所以要删除我们不用的Vue组件时：
1. 删除其余组件中引入的该组件
2. 删除分配给该组件的路由
3. 可能需要删除main.js中的关联语句
4. html中标签是被动关联，不需要删除

开始删除：

根据上面的指引，一组件三部分，我们进行HelloWorld.vue和About.vue的删除，留下HomeView.vue当作我们博客的主页文件
没有全删完的时候，Vue会由于引用缺失而报错，删干净有关部分即可。

1. 其他组件的引用部分：

HelloWorld部分仅在HomeView.vue中被引入
About仅在App.vue中被引用：

2. router中的路由配置：

所有的网页路由配置都在router文件夹下的index.js，发现只有About.vue有路由：

3. main.js中的关联语句：

main.js中只有App.vue一条配置语句，不必删除了

删除完成后还是报错？

所有对于代码的修改，vscode都需要手动保存！！！！！！
关闭该文件可以进行保存，笔记本原键盘Ctrl + s也可以保存：
之后发现：

2. 导航栏组件：

确定导航栏组件位置：

通过观察默认项目，我们发现原本的两个网页：

HomeView.vue和About.vue都是以标签存储在App.vue中，再由App.vue挂靠到html文件中的<\div>标签上

同时App.vue组件含有自身的html标签 css样式 js效果
那么，之后所有页面都要用到的导航栏，直接写到App.vue内部的html文件中即可
看一眼现在的前端：发现有个图标，影响我们自己的创作

F12发现这个Image的css属于home类，尝试去HomeView.vue删除该图片：

创建导航栏组件：

1. 导入BootStrap：

写导航栏样式时用到BootStrap，从Vue项目根组件App.vue导入库：

也可以在main.js中导入：
发现模块缺失，需要单独下载：
去依赖中搜索安装该组件即可：点击一次即可，安装过程可能很慢
安装完成后还会有弹窗提示，但是此时发现任务栏有警告了，其实是bootstrap自身警告，和咱们的项目无关

2. 编写导航栏组件：

.vue组件存放在components文件夹抑或 views文件夹下都可以
去BootStrap官网搜索下载喜欢的css样式：
上面是效果预览，下面是html代码
为NavBar.vue装配样式，导出对象：
在根组件中引入NavBar组件（毕竟最后由根组件挂靠到前端标签）：
保存上述对NavBar和App的修改，查看此时的页面：
发现此时导航栏太宽，需要修改css样式，
这一步BootStrap已准备好，只需要我们换一个css类名即可

但是效果也没有太大改动……：
下面我们来看看当初导入的BootStrap的javaScript效果：

如果你没有动态放缩的功能，可能忘记导入Bootstrap的js及其插件popper

3. 主页组件：

1. Cards效果：

首先还是去BootStrap寻找一个喜欢的效果，这里使用很多网站常用的cards：
直接粘贴到HomeView.vue，删除我们不用的内容：
加上contain的css类效果，可以响应式调整大小；同时规定举例边距：

2. 其余功能：

其余功能性页面继续细分给更多组件

4. 好友列表：

1. Card效果：

先创建所有组件的基本架构：
我习惯将公共组件放在components目录，独立组件放在Views目录
像主页一样，添加card效果：

2. 公共组件：

发现很多页面都用着一样的效果，比如这里的card + margin-top
那么我们其实可以将其提取出来，做成一个公共组件供调用：
利用公共组件重写HomeView.vue和UserList.vue：
HomeVIew.vue：

UserList.vue：
对网页效果没有影响：

3. 其余页面：

使用公共组件CommBase.vue创建其余界面的组件：
代码复制粘贴HomeView.vue的即可，只需修改两处：

5. 网页路由分配：

1. 分配网页路由：

还记得刚建立项目时的路由信息，一个{}下三部分：
1. path为在localhost:8080后拼接的网址
2. name为之后页面之间跳转使用，最好和path的命名一致
3. component 和 import搭配使用，导入一个vue组件
那么路由分配的步骤就很清晰了：
1. import导入vue组件
2. 确定路由名
3. 确定网址名
4. components声明导入的vue组件
我们一共有六个网页，需要用六个{}来导入六个组件，写好12个名称：
如果你的组件名组件内部name 路由import 路由component没错，那么现在应该可以通过输入网址看到对应的vue组件：

2. 实现前端渲染

此时各个组件未挂载到根组件App.vue上，所以我们只能直接输入网址访问
现在想通过导航栏点击实现跳转，查看导航栏组件：
用路由path填满之后，发现可以点击访问了：
但是不符合前端渲染一次将所有网页样式交付的优势，每次点击都是重新发起请求来获取当前页面：
Vue的前端渲染是通过router-link标签的:to属性 + 路由的name键来实现的
小技巧：按住Alt键(也有的地方是Ctrl键)+ 鼠标可以多行同步编辑
如果你修改对了router-link标签和 :to=“{name:‘’}”，那么现在点击NavBar就不必再请求url资源：