Vue安装到精通项目实战（2021最新！）

ゝ一纸荒年。 2022-11-19 01:14 142阅读 0赞

### Vue框架 ###

*  Vue概念
 *  渐进式框架
 *  Vue安装
 *   *  安装配置npm
     *  脚手架安装
     *  生成vue 项目
 *  Vue目录结构
 *   *  调用关系图
 *  MVVM概念
 *   *  特点
     *  MVC和MVVM框架区别
 *  项目分析：
 *  Vue生命周期 lifecycle
 *  组件化（Element-UI）
 *   *  概念
     *  ElementUI 安装
 *  拓展：观察者设计模式
 *  总结

# Vue概念 #

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。近年来发展非常迅速，标准也在不断完善已经达到ES6时代。

ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是让JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，洗白其一直被“鄙视”的脚本语言的前身。  
![在这里插入图片描述][20210413215456794.png]

随着js的强大，三大巨头横空推出，形成鼎足之势。前端新三大框架：Angular/React/Vue，三种是目前主流js框架。Angular全面，项目代码多；Vue轻便，针对性解决问题，拿来就用，开发存在局限性。新手可以从vue上手，再去了解react和angular。

Vue是我们国人开发，作者：尤雨溪，是一个基于JavaScript的渐进式前端框架，更符合中国人习惯，在中国很多大型一线企业中广泛应用。Vue3.0使用TypeScript，TypeScript是JavaScript的超集，微软研发，语法更加细致严谨，改js脚本语言为向一线强语言java、c靠拢，可以构建大型项目，基于ES6标准。

# 渐进式框架 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70]  
Vue是一个用于构建用户界面的渐进式SPA单一页面框架。与其他庞大而单一框架不同的是，Vue从一开始就被设计为可逐步采用。

*  可以只使用vue.js
 *  可以只使用vue.js + components组件
 *  可以只使用vue.js + components组件 + router路由
 *  可以只使用vue.js + components组件 + router路由 + vuex状态管理
 *  构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

# Vue安装 #

## 安装配置npm ##

**验证node.js 安装：**

dos命令提示符下执行（有版本号即安装成功）：

node安装（v8.11.3，至少8以上）

node -v

npm安装（v5.6.0）

npm -v

参考博客：[https://blog.csdn.net/weixin\_53601359/article/details/115680033][https_blog.csdn.net_weixin_53601359_article_details_115680033]

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

**安装 cnpm**

cnpm是一个完整 npmjs.org 镜像，可以用此代替nodejs.org官方版本，同步频率目前为10分钟一次，以保证尽量与官方服务同步。（目的为了提高访问、下载速度）

查看当前配置的镜像源

`npm config get registry`

执行结果：

> https://registry.npmjs.org/  
> 或者  
> https://registry.npm.taobao.org/

npm切换到淘宝镜像方式（提高下载速度）：

`npm config set registry https://registry.npm.taobao.org`

直接使用淘宝镜像命令方式：

`npm install -g cnpm --registry=https://registry.npm.taobao.org`

cnpm版本，有版本号即安装成功（直接支持cnpm命令，和npm一样只是库不同）

`cnpm –v`

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

## 脚手架安装 ##

vue-cli 脚手架工具安装与配置（需要几分钟）

> `npm install vue-cli -g` \#安装vue-cli脚手架  
> `npm uninstall vue-cli -g` \#卸载vue-cli脚手架

查看版本（有版本号即安装成功）：

> `vue --version` \# 2.9.6  
> `vue -V`

## 生成vue 项目 ##

指定文件下开启cmd，project为自定义项目名称，不可使用大写

`vue init webpack project`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 2]  
安装成功：

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

> To get started:  
> `cd project` 进入项目  
> `npm run dev` 启动服务，ctrl+c停止

![在这里插入图片描述][20210414191431219.png]  
注意：端口号可能不同，默认为8080，如果发现端口占用npm会自动改变端口号，具体 以当前环境为准。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 4]

# Vue目录结构 #

这个目录结构非常重要。就如你要生孩子去妇幼保健院，你要游泳去游泳馆。规定好每个目录的作用，方式和位置就约定统一了。有了这套规则，文件就不会乱放，这样找资源时就知道到哪里找，写代码文件时就按功能放到指定的目录中。这种方式已经非常常见，如Maven构建项目目录有强制的约定，如Spring框架中约定大于配置。

*  src 目录是一个很大的目录，包罗万象
 *  components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vue
 *  router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。router非常强大，老系统是URL改变是在服务端进行刷新，而router支持在客户端刷新，就是URL变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。
 *  view 就是用户要访问的页面都存放在这个目录下，如Index.vue
 *  static中保存一些静态的资源，如jquery、css、图片等

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

*  package.json 各组件版本，特别启动的参数  
    ![在这里插入图片描述][20210414192737936.png]
 *  build/webpack.dev.config.js 核心默认配置文件，启动的配置参数![在这里插入图片描述][20210414192849633.png]
 *  build/webpack.base.conf.js 基础配置文件  
    ![在这里插入图片描述][20210414192858841.png]
 *  index.html 首页，Vue是SPA单页面开发，页面入口，定义div\#app
 *  src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 5]
 *  src/App.vue 根组件  
    ![在这里插入图片描述][20210414192932804.png]
 *  src/router/index.js 引入子组件HellWorld.vue  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 6]

## 调用关系图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 7]  
简单来说项目加载的过程是：

> index.html -> main.js -> App.vue -> index.js -> HelloWorld.vue

可以看到Vue项目是自有一套规则，一套机制的，非常系统化的。有固定的文件，有自定义的文件，各自放在指定的目录下，指定的文件中，指定的地方，最终来实现用户的需求。那在开发之前，你就必须了解这套机制，写代码的时候就规则清晰，如有神助，知道该如果写代码，知道为什么这么写，代码文件该放在哪，它们是谁调用谁，互相怎么调用的了。

# MVVM概念 #

和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是，传统js机制操作的是页面，像html+css+js项目，大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 8]

## 特点 ##

*  一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
 *  其核心思想是数据驱动、组件化的前端开发
 *  原生html页面操作的是dom，而vue.js操作的是数据，从而屏蔽了复杂晦涩难懂的dom结构。和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是组件，是数据，也更加符合面向对象的方式

## MVC和MVVM框架区别 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 9]  
MVC全名是Model-View-Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。  
![在这里插入图片描述][20210414193952544.png]  
MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事 ViewModel已经帮我们做了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

# 项目分析： #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
        <script src="js/vue.js" type="text/javascript"></script>
    	</head>
    
    	<body>
          <div id="app">
            <p>{
       {message}}</p>
          </div>
    	</body>
    
      <script> new Vue({ el : '#app', data : { message: "Hello Vue." } }) </script>
    </html>

创建Vue匿名对象，直接参数就是一个对象，一个类似json格式的js对象，这样的代码结构更加简洁。

> Vue对象的参数：
> 
>  *  el： 绑定到指定名称的html标签上
>  *  data： 绑定的数据，相当于给html中使用的时候所传的值

# Vue生命周期 lifecycle #

使用vue做项目时，我们需要了解vue对象的生命周期和生命周期函数（Vue 实例从创建到销毁的过程），这样才能知道哪些事情应该在哪个函数里做。

如页面创建时，页面加载时，页面更新时，页面销毁时？

在这过程中，我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。

生命周期函数：

*  vue实例在某一个时间点会自动执行这些函数；
 *  生命周期钩子函数不允许写成箭头函数；  
    可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）

细分每个过程：

<table> 
 <thead> 
  <tr> 
   <th>默认值</th> 
   <th>取值范围</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>new Vue</td> 
   <td>创建vue实例</td> 
  </tr> 
  <tr> 
   <td>init events &amp; lifecycle</td> 
   <td>开始初始化</td> 
  </tr> 
  <tr> 
   <td>beforeCreate</td> 
   <td>组件刚被创建，组件属于计算之前，如data属性等</td> 
  </tr> 
  <tr> 
   <td>init injections &amp; reactivity</td> 
   <td>通过依赖注入导入依赖项</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>组件实例创建完成，属性已绑定，此时DOM还未生成</td> 
  </tr> 
  <tr> 
   <td>el 属性</td> 
   <td>检查vue配置，即new Vue()里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用v.$mount()</td> 
  </tr> 
  <tr> 
   <td>template</td> 
   <td>检查配置中的template项，如果没有，则被绑定区域的el对象的outHTML（即整个#app DOM ，包括 
    <div>
      和 
    </div>标签）都作为被填充对象替换掉填充区域</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>模板编译、挂载之前</td> 
  </tr> 
  <tr> 
   <td>create v$el and replace el</td> 
   <td>编译、并替换了被绑定元素</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>编译、挂载</td> 
  </tr> 
  <tr> 
   <td>befor update</td> 
   <td>组件更新之前</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>组件更新之后</td> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td>当v.$destroy()被调用，开始拆卸组件和监听器，生命周期终结</td> 
  </tr> 
 </tbody> 
</table>

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

# 组件化（Element-UI） #

## 概念 ##

组件 (Component) 是 Vue.js 最强大的功能之一。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。可以理解为组件是对HTML元素的扩展。它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。  
![在这里插入图片描述][20210414192017316.png]  
Element：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。界面优美，浏览器兼容，事半功倍。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 11]  
官网地址：

> [https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN] \#首页  
> [https://element.eleme.cn/\#/zh-CN/component/layout][https_element.eleme.cn_zh-CN_component_layout] \#组件页  
> [https://unpkg.com/browse/element-ui@2.15.1/][https_unpkg.com_browse_element-ui_2.15.1] 组件下载地址

## ElementUI 安装 ##

在Vue项目目录下运行CMD  
`npm i element-ui -D`

将element-ui文件放到rc目录下：  
包含：js脚本、css样式文件、*.ttf、*.woff字体文件  
![在这里插入图片描述][20210414193640276.png]

# 拓展：观察者设计模式 #

设计模式是最精髓的东西，是软件思想的体现，是软件的灵魂。如三大框架SSM只所以傲视群雄，它的傲娇就来自对经典设计模式的应用。所以如果只会应用不懂其义，那你只是个码农；如何能领会设计模式的奥义，你就有了高级程序员的潜力；如果你能自己仿写，你就有了架构师的入门证。

Vue这类为何称之为框架，就是其不是简单的编程，而是应用了经典的设计模式，那它应用了什么什么模式呢？它应用了“观察者设计模式”。

那什么是观察者设计模式呢？

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 12]

*  页面data中的address就是数据
 *  get为获取当前数据，set为设置数据新值
 *  观察者watcher就为那多个插值表达式和input文本框，在页面加载时这些关系进行双向绑定
 *  当我们让数据变化时，如input文本框修改内容，其就调用数据的set的方法，把数据进行更新，其更新就被vue框架通知notify众多的观察者。如众多的插值表达式就会触发trigger，进行再次渲染re-render，修改虚拟dom树。最终vue框架局部宣传页面
 *  同样，当我们利用谷歌浏览器改变数据v.address赋值时，就调用数据的setter方法进行数据更新，数据更新后，通知众多的观察者，观察者更新如上面的流程

可以看出Vue设计非常巧妙，我们页面展现的数据，必然会涉及到数据的读写，于是Vue实现了一整套机制，这套机制监控数据的获取（get），数据的更新（set），这样当数据变化，Vue就能知道。它知道有什么用呢？它就能控制当数据变化时就能重新进行页面的渲染，从而用户看到页面展现新的内容。

# 总结 #

可以看到Vue这类为何称为框架，名副其实，当之无愧。写javaScript时，我们要先去学习其复杂的api（document.getElementById()），写jQuery时，又学一套复杂的api(一堆的选择器)，特别它的写法虽然简洁，却晦涩难懂，需要死记大量英文单词，初学者极易写错，门槛很高，就现在很多企业的程序员依然被绊倒，说不明白，讲不清楚，使用中bug满天飞，一堆糊涂虫。

[20210413215456794.png]: /images/20221022/3496282f707144f489c4223180a808d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70]: /images/20221022/aaed9d824332451192cb9beb21540c07.png
[https_blog.csdn.net_weixin_53601359_article_details_115680033]: https://blog.csdn.net/weixin_53601359/article/details/115680033
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/2ff7f2a5136e41e8be9933d4d256ce93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/09d3f7e716804aa78d7f026dff596b02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/82a2f3ac24224820919ec780021ff298.png
[20210414191431219.png]: /images/20221022/8793a1cf318544c3b9630501d6524a89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/909ca381146a423bbec4ff611417cf8a.png
[20210414192737936.png]: /images/20221022/43151bd12f6b4cd1878ebb8669b09eed.png
[20210414192849633.png]: /images/20221022/e663df9c709d4a06977c13fbd57d1380.png
[20210414192858841.png]: /images/20221022/873ab01b499548ef8267c7372b4f16d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/bb35779071ad45bc8ff864af043ee464.png
[20210414192932804.png]: /images/20221022/a152e2c9c79242c283e4ce3255d96f57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/dc3151ff710d48f6b71f11f558c0b8dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 7]: /images/20221022/04a2e95de064447582bd8bfd55881f06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 8]: /images/20221022/cb765fd24b1f46228798f6eb33a90988.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 9]: /images/20221022/f987468ac84844daacc4f6e0c1d6a1e1.png
[20210414193952544.png]: /images/20221022/b426a76d01c341c2a8a37c28c8af84dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 10]: /images/20221022/059831c2fa2e4a3897436586becf21fc.png
[20210414192017316.png]: /images/20221022/b078b2018a874cdeb76f1c32cf184961.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 11]: /images/20221022/27149f68e3a84f7c973f3f478bd0cdea.png
[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN
[https_element.eleme.cn_zh-CN_component_layout]: https://element.eleme.cn/#/zh-CN/component/layout
[https_unpkg.com_browse_element-ui_2.15.1]: https://unpkg.com/browse/element-ui@2.15.1/
[20210414193640276.png]: /images/20221022/fba00f5ffdfb427ca7365bb48bc4bad7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzYwMTM1OQ_size_16_color_FFFFFF_t_70 12]: /images/20221022/bb1fcc3a941f45b4a85e5414518d39b0.png