目录
- <<回到导览
- 1.面经基础版
- 1.1.VueCli建项目
- 1.1.1.VueCli 自定义项目
- 1.1.2.ESlint代码规范
- 1.2.项目路由
- 1.2.1.一级路由配置
- 1.2.2.二级配置路由
- 1.2.3.设置高亮
- 1.2.4.发生请求、渲染
- 1.2.5.跳转传参、再发请求
- 1.2.6.体验优化
- 1.2.7.keep-alive
<<回到导览
1.面经基础版
1.1.VueCli建项目
1.1.1.VueCli 自定义项目
-
安装脚手架 (已安装)
npm i @vue/cli -g -
创建项目
vue create 项目名 -
选择创建自定义项目选项，回车
-
自定义项目（空格键为确认/取消），回车
-
选择vue的版本
-
是否使用history模式
-
选择css预处理
-
选择eslint规范
-
选择校验的时机 （保存校验）
-
选择配置文件的生成方式（放在单独的文件之中）
-
是否保存预设，为预设命名
当我们保存预设后，下次可以直接建立含有上面选项的项目
-
项目创建完毕
1.1.2.ESlint代码规范
JavaScript Standard Style 规范说明：https://standardjs.com/rules-zhcn.html
-
通过eslint插件来实现自动修正
-
配置VSCode
添加配置代码
// 当保存的时候，eslint自动帮我们修复错误 "editor.codeActionsOnSave": {"source.fixAll": true }, // 保存代码，不自动格式化 "editor.formatOnSave": false
1.2.项目路由
1.2.1.一级路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
// 一级路由
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'Vue.use(VueRouter)
const router = new VueRouter({routes: [{path: '/',component: Layout},{path: '/detail',component: ArticleDetail}]
})
export default router
1.2.2.二级配置路由
通过children配置项，可以进行路由嵌套，配置二级路由
-
二级配置路由(view/index.js)
routes: [// 一级路由{path: '/',component: Layout,children: [// 二级路由{path: '/article',component: Article},{path: '/collect',component: Collect},{path: '/like',component: Like},{path: '/user',component: User}]},{path: '/detail',component: ArticleDetail}] -
配置二级路由出口（Layout.vue）
<div class="h5-wrapper"><div class="content"><!-- 二级路由出口 --><router-view></router-view></div><nav class="tabbar"><router-link to="/article">面经</router-link><router-link to="/collect">收藏</router-link><router-link to="/like">喜欢</router-link><router-link to="/user">我的</router-link></nav></div>一级路由的出口在App.vue中
<div class="wrapper"><router-view></router-view> </div>
很多同学心里的路由应该是这样的
-
诚然，这样的路由更符合我们操作逻辑；
-
但是在我们最开始的路由图中，一级路由首页和二级路由都有个特点，都有导航条
-
所以首页和二级路由分为一类，没有导航条的面经详情分为一类
-
从路由出口的角度来看，一级路由出口在App.vue，二级路由出口在首页（Layout.vue），而导航条在一级路由页Layout.vue中，二级路由出口外
-
所以，首页和二级路由都有都有导航条，而面经详情页没有
-
说得有点绕，画个图方便理解一些（一级路由出口就是包裹、定位一级路由页的容器，二级亦然）
1.2.3.设置高亮
-
将a标签替换为
<router-link to="/xxx">XXX</router-link> -
设置高亮样式（也可以先自定义匹配类名）
.router-link-active{font-weight: 700;color: orange; }
1.2.4.发生请求、渲染
安装axios:yarn add axios
接口文档：
请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get
接下来的操作无非是请求数据（created），循环渲染，这里我就省略了
1.2.5.跳转传参、再发请求
-
为盒子设置点击传参
// 传参方式多样，可以自己选择 @click="router.push(`/detail?id=${item.id}`)" -
获取传递参数，将参数传给服务器，再将结果渲染即可
1.2.6.体验优化
-
为首页重定向列表页
加配置项
redirect: '/article' -
为面经详情页添加返回上一页按钮
@click="router.back()"
1.2.7.keep-alive
- 当路由被跳转后，原来所看到的组件就被销毁了，重新返回后组件又被重新创建了。
- 所以当点击返回上一页按钮，因为主页组件已被销毁，所以并不能回到进入面经详情页时，首页的位置
- 我们可以利用keep-alive组件，来缓存主页组件，来完成这个功能
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中
-
App.vue
<template><div class="h5-wrapper"><keep-alive><!-- 一级路由出口 --><router-view></router-view></keep-alive></div> </template>以上代码，keep-alive包裹了一级路由出口，那么一级路由页都会被缓存；但是同为一级路由页的面经详情页，我们并不想其缓存（因为面经详情页太多了，浏览量多的画会影响性能），我们可以利用keep-alive的三个属性
属性 效果 include 组件名数组，只有匹配的组件会被缓存 exclude 组件名数组，任何匹配的组件都不会被缓存 max 最多可以缓存多少组件实例 -
上面代码可以改为(只显示了修改的部分)
<!-- LayoutPage为组件名，没有组件名才会匹配组件名 --> <keep-alive :include="['LayoutPage']"><router-view></router-view> </keep-alive>缓存组件后，再返回首页，created，mounted等生命钩子并不会触发（因为组件没有被重新创建），如果我们要返回首页立即触发某些事件，我们可以利用keep-alive 的额外的两个生命周期钩子。
生命周期钩子 触发时机 activated 当组件被激活（使用）的时候触发 deactivated 当组件不被使用的时候触发
】Sliding Window Maximum)