Vue2向Vue3过度核心技术综合案例

最新推荐文章于 2024-05-10 17:39:47 发布

赵广陆

最新推荐文章于 2024-05-10 17:39:47 发布

阅读量212

点赞数

分类专栏： vue 文章标签： vue.js javascript ecmascript 前端 css

本文链接：https://blog.csdn.net/ZGL_cyy/article/details/132508528

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1 面经基础版-案例效果分析

在这里插入图片描述

1.面经效果演示

2.功能分析

通过演示效果发现，主要的功能页面有两个，一个是列表页，一个是详情页，并且在列表页点击时可以跳转到详情页
底部导航可以来回切换，并且切换时，只有上面的主题内容在动态渲染

在这里插入图片描述

3.实现思路分析：配置路由+功能实现

1.配置路由

首页和面经详情页，两个一级路由
首页内嵌套4个可切换的页面（嵌套二级路由）

2.实现功能

首页请求渲染
跳转传参 到详情页，详情页动态渲染
组件缓存，性能优化

在这里插入图片描述

2 面经基础版-一级路由配置

1.把文档中准备的素材拷贝到项目中

2.针对router/index.js文件进行一级路由配置

...
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'
...


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout
    },
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

3 面经基础版-二级路由配置

二级路由也叫嵌套路由，当然也可以嵌套三级、四级…

1.使用场景

当在页面中点击链接跳转，只是部分内容切换时，我们可以使用嵌套路由

2.语法

在一级路由下，配置children属性即可
配置二级路由的出口

1.在一级路由下，配置children属性

注意:一级的路由path 需要加 / 二级路由的path不需要加 /

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children:[
        //children中的配置项 跟一级路由中的配置项一模一样 
        {path:'xxxx',component:xxxx.vue},
        {path:'xxxx',component:xxxx.vue},
      ]
    }
  ]
})

技巧：二级路由应该配置到哪个一级路由下呢？

这些二级路由对应的组件渲染到哪个一级路由下，children就配置到哪个路由下边

2.配置二级路由的出口

注意： 配置了嵌套路由，一定配置对应的路由出口，否则不会渲染出对应的组件

Layout.vue

<template>
  <div class="h5-wrapper">
    <div class="content">
      <router-view></router-view>
    </div>
  ....
  </div>
</template>

3.代码实现

router/index.js

...
import Article from '@/views/Article.vue'
import Collect from '@/views/Collect.vue'
import Like from '@/views/Like.vue'
import User from '@/views/User.vue'
...

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/article',
      children:[
        {
          path:'/article',
          component:Article
        },
        {
          path:'/collect',
          component:Collect
        },
        {
          path:'/like',
          component:Like
        },
        {
          path:'/user',
          component:User
        }
      ]
    },
    ....
  ]
})

Layout.vue

<template>
  <div class="h5-wrapper">
    <div class="content">
      <!-- 内容部分 -->
      <router-view></router-view>
    </div>
    <nav class="tabbar">
      <a href="#/article">面经</a>
      <a href="#/collect">收藏</a>
      <a href="#/like">喜欢</a>
      <a href="#/user">我的</a>
    </nav>
  </div>
</template>

4 面经基础版-二级导航高亮

1.实现思路

将a标签替换成组件，配置to属性，不用加 #
结合高亮类名实现高亮效果 (推荐模糊匹配：router-link-active)

2.代码实现

Layout.vue

....
    <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>

<style>
   a.router-link-active {
      color: orange;
    }
</style>

5 面经基础版-首页请求渲染

1.步骤分析

1.安装axios

2.看接口文档，确认请求方式，请求地址，请求参数

3.created中发送请求，获取数据，存储到data中

4.页面动态渲染

2.代码实现

1.安装axios

yarn add axios npm i axios

2.接口文档

请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get

3.created中发送请求，获取数据，存储到data中

 data() {
    return {
      articelList: [],
    }
  },
  async created() {
    const {  data: { result: { rows } }} = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
    this.articelList = rows
  },

4.页面动态渲染

<template>
  <div class="article-page">
    <div class="article-item" v-for="item in articelList" :key="item.id">
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">
        {{item.content}}
      </div>
      <div class="foot">点赞 {{item.likeCount}} | 浏览 {{item.views}}</div>
    </div>
  </div>
</template>

6 面经基础版-查询参数传参

1.说明

跳转详情页需要把当前点击的文章id传给详情页，获取数据

查询参数传参 this.$router.push(‘/detail?参数1=参数值&参数2=参数值’)
动态路由传参先改造路由在传参 this.$router.push(‘/detail/参数值’)

2.查询参数传参实现

Article.vue

<template>
  <div class="article-page">
    <div class="article-item" 
      v-for="item in articelList" :key="item.id" 
      @click="$router.push(`/detail?id=${item.id}`)">
     ...
    </div>
  </div>
</template>

ArticleDetail.vue

  created(){
    console.log(this.$route.query.id)
  }

7 面经基础版-动态路由传参

1.实现步骤

改造路由
动态传参
在详情页获取参数

2.代码实现

改造路由

router/index.js

...
  {
      path: '/detail/:id',
      component: ArticleDetail
  }

Article.vue

<div class="article-item" 
     v-for="item in articelList" :key="item.id" 
     @click="$router.push(`/detail/${item.id}`)">
       ....
 </div>

ArticleDetail.vue

  created(){
    console.log(this.$route.params.id)
  }

3.额外优化功能点-点击回退跳转到上一页

ArticleDetail.vue

<template>
  <div class="article-detail-page">
    <nav class="nav"><span class="back" @click="$router.back()">&lt;</span> 面经详情</nav>
     ....
  </div>
</template>

8 面经基础版-详情页渲染

1.实现步骤分析

导入axios
查看接口文档
在created中发送请求
页面动态渲染

2.代码实现

接口文档

 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
 请求方式: get

在created中发送请求

 data() {
    return {
      articleDetail:{}
    }
  },
  async created() {
    const id = this.$route.params.id
    const {data:{result}} = await axios.get(
      `https://mock.boxuegu.com/mock/3083/articles/${id}`
    )
    this.articleDetail = result
  },

页面动态渲染

<template>
  <div class="article-detail-page">
    <nav class="nav">
      <span class="back" @click="$router.back()">&lt;</span> 面经详情
    </nav>
    <header class="header">
      <h1>{{articleDetail.stem}}</h1>
      <p>{{articleDetail.createAt}} | {{articleDetail.views}} 浏览量 | {{articleDetail.likeCount}} 点赞数</p>
      <p>
        <img
          :src="articleDetail.creatorAvatar"
          alt=""
        />
        <span>{{articleDetail.creatorName}}</span>
      </p>
    </header>
    <main class="body">
      {{articleDetail.content}}
    </main>
  </div>
</template>

9 面经基础版-缓存组件

1.问题

从面经列表点到详情页，又点返回，数据重新加载了 → 希望回到原来的位置

在这里插入图片描述

2.原因

当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的beforeDestroy和destroyed生命周期钩子），重新返回后组件又被重新创建了（会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子），所以数据被加载了

3.解决方案

利用keep-alive把原来的组件给缓存下来

4.什么是keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。

优点：

在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，

减少加载时间及性能消耗，提高用户体验性。

App.vue

<template>
  <div class="h5-wrapper">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

问题：

缓存了所有被切换的组件

5.keep-alive的三个属性

① include ：组件名数组，只有匹配的组件会被缓存

② exclude ：组件名数组，任何匹配的组件都不会被缓存

③ max ：最多可以缓存多少组件实例

App.vue

<template>
  <div class="h5-wrapper">
    <keep-alive :include="['LayoutPage']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

6.额外的两个生命周期钩子

keep-alive的使用会触发两个生命周期函数

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发

deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和deactived钩子，帮我们实现业务需求。

7.总结

1.keep-alive是什么

2.keep-alive的优点

3.keep-alive的三个属性 (了解)

4.keep-alive的使用会触发两个生命周期函数(了解)

10 VueCli 自定义创建项目

1.安装脚手架 (已安装)

npm i @vue/cli -g

2.创建项目

vue create hm-exp-mobile

选项

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

手动选择功能

在这里插入图片描述

选择vue的版本

  3.x
> 2.x

是否使用history模式

在这里插入图片描述

选择css预处理

在这里插入图片描述

选择eslint的风格（eslint 代码规范的检验工具，检验代码是否符合规范）
比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子

在这里插入图片描述

选择校验的时机（直接回车）

在这里插入图片描述

选择配置文件的生成方式（直接回车）

在这里插入图片描述

是否保存预设，下次直接使用？ => 不保存，输入 N

在这里插入图片描述

等待安装，项目初始化完成

在这里插入图片描述

启动项目

npm run serve

11 ESlint代码规范及手动修复

代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加;？…

没有规矩不成方圆

ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则。

1.JavaScript Standard Style 规范说明

建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候, 遇到错误就查询解决。

下面是这份规则中的一小部分：

字符串使用单引号 – 需要转义的地方除外
无分号 – 这没什么不好。不骗你！
关键字后加空格 if (condition) { ... }
函数名后加空格 function name (arg) { ... }
坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null
…

2.代码规范错误

如果你的代码不符合standard的要求，eslint会跳出来刀子嘴，豆腐心地提示你。

下面我们在main.js中随意做一些改动：添加一些空行，空格。

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

new Vue ( {
  render: h => h(App),
  router
}).$mount('#app')

按下保存代码之后：

你将会看在控制台中输出如下错误：

在这里插入图片描述

eslint 是来帮助你的。心态要好，有错，就改。

3.手动修正

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,…）去 ESLint 规则列表中查找其具体含义。

打开 ESLint 规则表，使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。

在这里插入图片描述

12 通过eslint插件来实现自动修正

eslint会自动高亮错误显示
通过配置，eslint会自动帮助我们修复错误

如何安装

在这里插入图片描述

如何配置

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

注意：eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目
注意：使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 Beatify

settings.json 参考

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}

赵广陆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2向Vue3过度核心技术综合案例

目录1 面经基础版-案例效果分析1.面经效果演示2.功能分析3.实现思路分析：配置路由+功能实现2 面经基础版-一级路由配置3 面经基础版-二级路由配置1.使用场景2.语法3.代码实现4 面经基础版-二级导航高亮1.实现思路2.代码实现5 面经基础版-首页请求渲染1.步骤分析2.代码实现6 面经基础版-查询参数传参1.说明2.查询参数传参实现7 面经基础版-动态路由传参1.实现步骤2.代码实现3.额外优化功能点-点击回退跳转到上一页8 面经基础版-详情页渲染
复制链接

扫一扫