【前端】Vue项目相关纯干货基础知识分享！

落日映苍穹つ 2022-12-15 12:39 272阅读 0赞

### Vue项目相关 基础知识分享！ ###

*  推荐UI组件库
 *  用脚手架vue-cli创建项目
 *  项目使用相关说明
 *   *  组件间通信的几种方式
     *  Vue的data为什么是一个函数
 *  vue-router
 *   *  单页应用（SPA）
     *  Vue keep-alive内置组件的作用
     *  怎么定义 vue-router 的动态路由? 怎么获取传过来的值
     *  vue-router 有哪几种导航钩子
     *  $route 和 $router 的区别
     *  vue项目实现路由按需加载(路由懒加载)的3种方式
 *  Vuex
 *  Vue开发出的移动端app项目如何打包成apk
 *  小程序框架 mpvue

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

最近忙着找工作，在这期间的复习过程中，为了方便查阅，总结了很多我常用到的基础内容和面试题。在这里分享给大家，大家也可以参考复习。

说明：本文不涉及axios，因为我自己很少接触到和后端交互（接口）。而且本类基础知识分享文章只推荐给各位有基础的朋友。

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

# 推荐UI组件库 #

首先，先推荐一些UI组件库，这些库可以更好的帮助我们开发相关功能。各位可以先了解一下简单用法，然后去实践。上手难度很低，都是直接导入，改改参数即可。之后的分享中就会给大家演示如何简单使用这些组件库。  
![在这里插入图片描述][20201016164207246.png_pic_cnter]

[Vant官方使用文档][Vant]

![在这里插入图片描述][20201016164514900.png_pic_ceter]

[Element-UI官方使用文档][Element-UI]

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

# 用脚手架vue-cli创建项目 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]  
node部分的内容可以参考我的文章：[node安装说明及介绍][node]

Vue的项目结构及说明可以参考我的文章：[Vue项目结构及说明][Vue]

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

# 项目使用相关说明 #

具体项目结构分析就不在这里展开说了。

这之后主要想总结的内容就在下图。下图就是我常用的 最基本的 开发Vue项目的 项目结构。  
![在这里插入图片描述][2020101616283033.png_pic_cnter]  
assets和static：主要用来存放 css、js、图片 等内容。（我通常在assets里存放 图片） 区别是：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]

components：存放各种组件。其中的项目结构都需要自己设定了。

router：存放路由信息。涉及的路由组件可以考虑放在components（pages）中，或者是放在其他自己设定好的文件夹。

vuex：用Vuex管理各种状态信息。

当然完整项目不可能就这么几个文件夹，各位需要看项目需求或者根据自己习惯设计。

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

在项目的src文件下，必须要有main.js和App.vue。

main.js是入口文件，用来创建Vue实例：

import Vue from 'vue'
    import App from '@/App.vue'
    
    /*vuex*/
    import store from '@/vuex/store'
    
    /*路由*/
    import router from '@/router'
    
    /*element-ui组件库完整导入*/
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    /*vant组件库完整导入*/
    import Vant from 'vant'
    import 'vant/lib/index.css'
    
    Vue.use(ElementUI)
    Vue.use(Vant)
    
    new Vue({ 
      el: '#app',
      render: h => h(App), // 简便写法
      /* components: {App}, // 映射组件标签 template: '<App/>' // 指定需要渲染到页面的模板 */
      store,
      router
    })

这其中如果想使用ui组件库有很多种使用方式，具体的使用请参考上方提供的官方文档，文档中写的很清晰。

在导入组件App.vue时：`import App from '@/App.vue'`，这个App不像以前一样就直接确定了这个组件的标签名，在这里我们还需要配置。这就是上面components的作用：将这个组件映射成特定名称的标签。

它完整的格式其实是这样的：`components:{App: App}`，但是我们可以简写，就变成了`components: {App}`。而现在又更加简化了：`render: h => h(App)`。

当我们导入好了之后就可以将这个模板匹配到页面中的id为app的div。  
我们渲染的根组件就是App.vue。

组件：局部功能界面，里面包含实现这个界面所有的相关资源html+css+js / img。正是因为它需要这些相关资源，所以在组件App.vue中，我们可以看到三组标签：`<template> <script> <style>`。

它的默认结构是：  
![在这里插入图片描述][20201016165336986.png_pic_enter]  
以上的默认结构中，template的部分存放的就是html，且在其中一定要有一个根标签，当然根标签不一定是div。然后script向外默认暴露一个配置对象，即script的部分存放的就是Vue（JS、jQuery）。style的部分没什么说法，存放的就是css。

在一个组件中可能遇到的，常用用法总结：

<template>
      <div>
      	
        <Search :comments="comments"/>
        
        <UsersMain/>
        
         
        <router-link to="/about">About</router-link>
        
        <keep-alive>
          
          <router-view msg="abc"></router-view>
        </keep-alive>
      </div>
    </template>
    
    <script> // 导入组件 import Search from './components/Search.vue' import Main from './components/Main.vue' // 导入vuex内容 import { mapState, mapGetters, mapActions} from 'vuex' export default { // 映射成组件标签 components: { Search, // 指定组件标签别名 UsersMain: Main }, /*接收父组件传递过来的参数*/ props: ['comments'], data(){ return{ content: '', comments: '' } }, mounted(){ this.intervalTime = setInterval(()=>{ },1000) }, beforeDestroy() { // 执行收尾的工作，清除定时器 clearInterval(this.intervalTime) }, methods:{ destroyVue () { this.$destroy() // 开始销毁 }, // 接收vuex中action方法 ...mapActions(['increment']), // 使用vuex中action方法 increment () { this.$store.dispatch('increment') }, /* 子组件传送 inputChange 给父组件，并且传递一个参数： handle () { this.$emit('inputChange',this.content) } */ /* 父组件可以接收到子组件传递过来的数据 successIpt(content){ this.content = content } */ }, computed:{ // 接收vuex中state数据 ...mapState(['count']), // 接收vuex中getter方法 ...mapGetters(['evenOrOdd']), // 使用vuex中getter方法 evenOrOdd(){ return this.$store.getters.evenOrOdd } }, // 监视内容信息 watch:{ content(){ this.handle() } } } </script>
    
    <style scoped> </style>

## 组件间通信的几种方式 ##

可以参考我的文章中通信方式部分内容：[面试文章][Link 1]

## Vue的data为什么是一个函数 ##

data写成函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

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

# vue-router #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter]

具体内容就不在这里赘述了，相关用法可以参考我的文章中vue-router部分：[vue-router相关使用方法][vue-router]

## 单页应用（SPA） ##

单页应用，简单来说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的html, js, css。所有的页面内容都包含在这个所谓的主页面中。  
多页面，就是指一个应用中有多个页面，页面跳转时整页刷新。  
单页面的优点和缺点：  
优点：  
1、内容的改变不需要重新加载整个页面，对服务器压力较小。  
2、前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；  
缺点：  
1、首次加载页面的时候需要加载大量的静态资源。  
2、不利于 SEO优化。  
3、页面导航不可用，如果一定要导航需要自行实现前进、后退。

## Vue keep-alive内置组件的作用 ##

凡是被keep-alive组件包裹的组件或路由，除了第一次以外，不会再经历创建和销毁阶段的，第一次创建后就会被缓存下来。

## 怎么定义 vue-router 的动态路由? 怎么获取传过来的值 ##

推荐文章：[vue-router传递参数的几种方式][vue-router 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener]  
1.命名路由搭配params，刷新页面参数会丢失  
2.查询参数搭配query，刷新页面数据不会丢失  
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

## vue-router 有哪几种导航钩子 ##

推荐文章：[vue-router 有哪几种导航钩子][vue-router 2]

## $route 和 $router 的区别 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 1]

## vue项目实现路由按需加载(路由懒加载)的3种方式 ##

推荐文章：[vue项目实现路由按需加载(路由懒加载)的3种方式][vue_3]

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

# Vuex #

最后，不得不说的就是Vuex，Vuex的作用就是对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)。比如刚才评论的例子，我们把comments评论部分数据放在了App.vue中，这么做之后还需要考虑组件间通信（但是实际上用了Vuex不一定比组件间通信简单，使用Vuex只是因为它的逻辑结构清晰）。

想使用Vuex，需要安装：`npm i --save vuex`

下图为Vuex的结构图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 2]  
vuex里有四个结构，state、mutations、actions、getters。  
更新state的是mutations、用state进行计算的是getters。  
操作mutations的是actions。  
这四个都是对象。  
state里面包含的数据原本是从vue组件中转移过来的。  
而组件要想获取到state里的数据，有四种方式：  
$store.state 或 mapState()  
$store.getters或mapGetters()

在vue中对标签 / 按钮进行操作，分发事件，触发action调用，用到的就是dispatch()或mapActions()。action不能直接对数据进行操作，所以去请求mutation，用到的就是commit()。这时候可能需要获取数据后再commit，所以就涉及到后台backend，用到的就是ajax请求，也就是说在vuex里可以直接进行异步操作。而到了mutation就可以直接更新状态。mutation里还有个开发工具devtool，专门用来监视mutation。

现在先看看整体思路：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 6]  
![在这里插入图片描述][20201016173112664.png_pic_enter]  
![在这里插入图片描述][20201016173131965.png_pic_cnter]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 4]  
最后上面提到的内容整合，将store拆分开来，就形成了项目结构：

![在这里插入图片描述][20201017153249442.png_pic_ceter]  
选择拆分出来，其实会更好管理。如果Vuex包含的数据 / 方法比较多的话，全放在一起，肯定会很繁琐。当然放在一起还是拆开，没有什么是非对错。建议还是拆分管理。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 5]  
![在这里插入图片描述][20201017153540959.png_pic_cnter]

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

# Vue开发出的移动端app项目如何打包成apk #

推荐文章：[用HBuilderX 打包 vue 项目 为 App 的步骤][HBuilderX _ vue _ _ App]（真的很好用）

推荐文章：[elementUI打包后elmentui自带图标失效问题][elementUI_elmentui]

（阅读下面的内容前，请先查看：用HBuilderX 打包 vue 项目 为 App 的步骤）

如果我们想在真机上测试效果，首先使用usb数据线连接自己的手机，然后将手机设置为开发者模式中的USB调试模式。（如果不知道如何开启USB调试模式请根据自己手机情况，百度查询）

注意：manifest.json配置完之后才能真机测试。

调整好了之后，使用HBuilderX的运行 - 运行到手机或模拟器 =》这时上面就会显示手机（一定是开启了USB调试模式才会检测出手机）  
![在这里插入图片描述][20201016162024667.png_pic_cnter]

连接后，会在手机上自动安装一个HbuilderAPP，用于真机调试。（不是去应用商店下载HBuilder）

安装好了之后就可以在真机上进行测试了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 5]

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

# 小程序框架 mpvue #

具体使用和Vue很像，不过在用法上略有区别，如果是微信小程序还需要使用微信开发者工具。各位想了解可以移步官方mpvue文档学习，或者参考我的文章：

[①初始化项目 分析项目结构][Link 2]  
[②很基础的小程序页面搭建][Link 3]  
[③Flyio实现前后台交互][Flyio]

[20201016164207246.png_pic_cnter]: /images/20221123/0d5370d208d44534b9c5c4f0afed049d.png
[Vant]: https://vant-contrib.gitee.io/vant/#/zh-CN/home
[20201016164514900.png_pic_ceter]: /images/20221123/3e33e240d6f04af087445f6917afb575.png
[Element-UI]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221123/1991932b6bf2469d86517572169e45f7.png
[node]: https://blog.csdn.net/qq_45613931/article/details/105538861
[Vue]: https://blog.csdn.net/qq_45613931/article/details/105812344
[2020101616283033.png_pic_cnter]: /images/20221123/e0cccc0115f649ed8d701827b3298e20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]: /images/20221123/908c2289a57046fbb5b8acef7b994d49.png
[20201016165336986.png_pic_enter]: /images/20221123/1b0bf63a5f9a4b70b9ede3f16ad39772.png
[Link 1]: https://blog.csdn.net/qq_45613931/article/details/106035099
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter]: /images/20221123/4c0a9b5bcd184423ad3bcbb7e259653d.png
[vue-router]: https://blog.csdn.net/qq_45613931/article/details/105890273
[vue-router 1]: https://blog.csdn.net/crazywoniu/article/details/80942642
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener]: /images/20221123/d890f973299f4130903ec2be2d8b641c.png
[vue-router 2]: https://blog.csdn.net/weixin_43900414/article/details/95441512
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 1]: /images/20221123/98b73c6a59e74a50ba577b35369b9fe2.png
[vue_3]: https://blog.csdn.net/xm1037782843/article/details/88225104
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 2]: /images/20221123/d378688b32ef449fb01ab0c9e139b4d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 2]: /images/20221123/59564464f71c4c1b9ad353b8ddbc1df8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 1]: /images/20221123/ed1eb71ce70843bc8c4dfa11c81f3159.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 2]: /images/20221123/6a6338f850564b29813945ed5f0e4f11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 3]: /images/20221123/014bc437276949c1875e11f723622797.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 3]: /images/20221123/ecbcf86543fb48f1859f7132ccbf341e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 4]: /images/20221123/97a40bdbe13b4df18508f02d89a8775c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 5]: /images/20221123/5514eff755a5495f932f05ea1a83ebce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 3]: /images/20221123/1040764aeccc412d9919e1e9071b0e9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 6]: /images/20221123/835b499c5d7a417383376900cf8d9536.png
[20201016173112664.png_pic_enter]: /images/20221123/274bc75b8a0f43bb9e03fea021b648e6.png
[20201016173131965.png_pic_cnter]: /images/20221123/82a5833596a64211baa7ec30e789416b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 4]: /images/20221123/56507b80c8334eb2bd84eeb231b09920.png
[20201017153249442.png_pic_ceter]: /images/20221123/96f7e24861a54cc1aeea9eb5e8501ca5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 4]: /images/20221123/939d1b8bc3f04963bcbc7de275df5d36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 7]: /images/20221123/5225cf30a560475a923cdaf2bde49e8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 8]: /images/20221123/c180064a36b0433fa1fc3a2ac145e975.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 9]: /images/20221123/51a5dd9a60cb486f9e6463cd786ef703.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 5]: /images/20221123/15c58eecaac94c35907a2a69fecc48d8.png
[20201017153540959.png_pic_cnter]: /images/20221123/424cded5ec034033b38dbfc1e7bdb034.png
[HBuilderX _ vue _ _ App]: https://www.cnblogs.com/taohuaya/p/10263519.html
[elementUI_elmentui]: https://blog.csdn.net/qq_37827221/article/details/100707748
[20201016162024667.png_pic_cnter]: /images/20221123/7fc3021f29874d26a6b7431b4ccaa41c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 10]: /images/20221123/f2682e1bb90044318ac4cd5b7253e5e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener 5]: /images/20221123/6946bc4c4294449cbf98979bb58d465f.png
[Link 2]: https://blog.csdn.net/qq_45613931/article/details/106380748
[Link 3]: https://blog.csdn.net/qq_45613931/article/details/106387966
[Flyio]: https://blog.csdn.net/qq_45613931/article/details/106454335