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

曾经终败给现在 2024-03-24 21:50 94阅读 0赞

#### 目录 ####

*   *  1 面经基础版-案例效果分析
     *   *  1.面经效果演示
         *  2.功能分析
         *  3.实现思路分析：配置路由+功能实现
     *  2 面经基础版-一级路由配置
     *  3 面经基础版-二级路由配置
     *   *  1.使用场景
         *  2.语法
         *  3.代码实现
     *  4 面经基础版-二级导航高亮
     *   *  1.实现思路
         *  2.代码实现
     *  5 面经基础版-首页请求渲染
     *   *  1.步骤分析
         *  2.代码实现
     *  6 面经基础版-查询参数传参
     *   *  1.说明
         *  2.查询参数传参实现
     *  7 面经基础版-动态路由传参
     *   *  1.实现步骤
         *  2.代码实现
         *  3.额外优化功能点-点击回退跳转到上一页
     *  8 面经基础版-详情页渲染
     *   *  1.实现步骤分析
         *  2.代码实现
     *  9 面经基础版-缓存组件
     *   *  1.问题
         *  2.原因
         *  3.解决方案
         *  4.什么是keep-alive
         *  5.keep-alive的三个属性
         *  6.额外的两个生命周期钩子
         *  7.总结
     *  10 VueCli 自定义创建项目
     *  11 ESlint代码规范及手动修复
     *   *   *  1.JavaScript Standard Style 规范说明
             *  2.代码规范错误
             *  3.手动修正
     *  12 通过eslint插件来实现自动修正

--------------------

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

![在这里插入图片描述][c0c13d8301894bca940d7907e20ce411.png]

#### 1.面经效果演示 ####

#### 2.功能分析 ####

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

![在这里插入图片描述][d4274d4c55f442f59afafb58d43463f8.png]

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

1.配置路由

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

2.实现功能

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

![在这里插入图片描述][83edc8e3f2dd4eb38d033d0520ff7c3d.png]

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

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

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

ArticleDetail.vue

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

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

#### 1.实现步骤 ####

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

#### 2.代码实现 ####

改造路由

router/index.js

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

Article.vue

ArticleDetail.vue

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

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

ArticleDetail.vue

### 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()"><</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.问题 ####

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

![在这里插入图片描述][af665cf890104dc6907306c1774b2c77.png]

#### 2.原因 ####

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

#### 3.解决方案 ####

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

#### 4.什么是keep-alive ####

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

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

**优点：**

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

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

App.vue

**问题：**

缓存了所有被切换的组件

#### 5.keep-alive的三个属性 ####

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

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

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

App.vue

#### 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     选自定义

*  手动选择功能

![在这里插入图片描述][3f9d6993b7e54eb28dfc46247e5dde5a.png]

*  选择vue的版本

3.x
    > 2.x

*  是否使用history模式

![在这里插入图片描述][1b99f0a768f144f2989c08939220ded4.png]

*  选择css预处理

![在这里插入图片描述][1e5fe59ac040446a9e08d665c50f0290.png]

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

![在这里插入图片描述][da34368dc74449858e98883311631918.png]

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

![在这里插入图片描述][32b99067f00444c1adcfeb7e8fd9b3f3.png]

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

![在这里插入图片描述][149e443f12a84b1b9c832f81f10770d8.png]

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

![在这里插入图片描述][3c7715c4020d4da2bfd721a434b56c12.png]

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

![在这里插入图片描述][9c7fc3b3d7b64014ab014c618040ef30.png]

*  启动项目

npm run serve

### 11 ESlint代码规范及手动修复 ###

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

> 没有规矩不成方圆

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

##### 1.JavaScript Standard Style 规范说明 #####

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

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

*  *字符串使用单引号* – 需要转义的地方除外
 *  *无分号* – [这][Link 1][没什么不好。][Link 2][不骗你！][Link 3]
 *  *关键字后加空格* `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')

按下保存代码之后：

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

![在这里插入图片描述][31b1fba0194447bfacacfd68e504e7a9.png]

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

##### 3.手动修正 #####

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

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

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

![在这里插入图片描述][9c182549715e43d6b4bcc440d750b1ab.png]

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

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

*  如何安装

![在这里插入图片描述][aee6e389c8fc4567aeaa6e74f881c4ab.png]

*  如何配置

// 当保存的时候，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
    }

[c0c13d8301894bca940d7907e20ce411.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/834b3bc0f9794c2290070a84cc8e84fb.png
[d4274d4c55f442f59afafb58d43463f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d0d1d69335b24d4c8d60aa9b29034e2a.png
[83edc8e3f2dd4eb38d033d0520ff7c3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/8a3d702a20aa4ec78d3a1828676b957a.png
[af665cf890104dc6907306c1774b2c77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d57da751a27d4b028d368cb6f7a01ec0.png
[3f9d6993b7e54eb28dfc46247e5dde5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e7a66225b3b94b3696f70c7438f5e2b5.png
[1b99f0a768f144f2989c08939220ded4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/aa5400b90f17467b9dd6acd587c50e9a.png
[1e5fe59ac040446a9e08d665c50f0290.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/95a277ebd4f84f6fb136f1fbbb73288a.png
[da34368dc74449858e98883311631918.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/683671063cc940c092df68963cb44712.png
[32b99067f00444c1adcfeb7e8fd9b3f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/b2c0208e97fb48c3aba418ceee6a2377.png
[149e443f12a84b1b9c832f81f10770d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d2025908150d46e5892d46dcf6052c84.png
[3c7715c4020d4da2bfd721a434b56c12.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/8a48c1e77ae0455b875e2012fd85edc2.png
[9c7fc3b3d7b64014ab014c618040ef30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/4b2d1036d47c438895950d9eade30d91.png
[JavaScript Standard Style]: https://standardjs.com/readme-zhcn.html
[Link 1]: http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding
[Link 2]: http://inimino.org/~inimino/blog/javascript_semicolons
[Link 3]: https://www.youtube.com/watch?v=gsfbh17Ax9I
[31b1fba0194447bfacacfd68e504e7a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d191d1960d7f420fb33fcefe2139536a.png
[ESLint]: https://zh-hans.eslint.org/docs/latest/rules/
[9c182549715e43d6b4bcc440d750b1ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2f83bf826dac4c36be24183fcd1e4b36.png
[aee6e389c8fc4567aeaa6e74f881c4ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/275d257130c0420fb06ce01fc823c9d3.png