本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。

文章目录

  • 一、准备工作：安装node.js
  • 二、项目搭建
    • 创建项目目录
    • 全局安装vue-cli
    • 使用Webpack初始化项目
    • 启动项目
    • 学会如何修改页面内容
      • 网页内容是如何展示出来的
        • 方法一：搜索关键内容
        • 方法二：看目录

一、准备工作：安装node.js

Windows系统的node.js安装十分简易，没有环境安装经验的伙伴可以参考文章：Windows系统下安装node.js

二、项目搭建

创建项目目录

我们需要先创建一个用于放置项目文件的目录，之后该项目相关的命令操作都需要在该路径下执行。我们新建一个hellovue的目录，然后进入到该目录，命令行路径提示如下：C:\hellovue>

全局安装vue-cli

  • 运行命令：npm install --global vue-cli
  • 安装完毕后，运行命令：vue -V验证安装情况，如果输出版本号，则说明安装成狗

使用Webpack初始化项目

Webpack是一个模块打包器。 它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。
vue-cli可以使用webpack模板对项目进行初始化，即生成webpack模板的项目初始代码文件。
可以运行命令：vue init webpack hellovue ，然后根据提示填写项目基本信息以及相关工具配置。

各个选项的含义如下：

选项意思建议
Project name项目名称起一个你喜欢的项目名称即可
Proiect description项目描述描述一下项目是什么应用即可；练手项目可以直接默认回车
Author作者练手项目写自己即可；业务项目写团队名或具体成员名称
Vue build项目构建模式回车选择默认方式即可
Install vue-router项目是否安装vue路由选择yes
Use ESLint to lint your code是否选择ESLint开发验证功能建议选择No，否则可能因为格式检查报错导致代码无法运行
Set up unit tests是否开启单元测试选择yes，项目后期越写越完善肯定需要测试来保证功能和效率
Pick a test runner选择测试方式默认Jtest即可
Setup e2e tests with Nightwatch是否开启e2e测试建议选择no
Should we runnpm install for you after the project has been created项目初始化后是否选择指定的包管理工具自动下载项目所需要的包建议选择 Yes.use NPM

启动项目

初始化结束之后，会有如下输出：


上面的输出已经提示我们，如果我们要启动项目，需要运行两个命令：

  • cd hellovue：进到我们刚才新建并且初始化的子项目中
  • npm run dev：dev模式运行项目（开发模式，用于开发者开发和测试）

运行后会有如下提示：

根据输出，我们的项目已经运行起来了，浏览器访问http://localhost:8080即可以到看到了。于是 我们浏览器访问指定地址后可以看到如下页面：

学会如何修改页面内容

网页内容是如何展示出来的

我们要修改网页内容，就要知道网页内容是如何展示出来的。

首先用你喜欢的编辑器打开项目（我个人偏爱并强推VS Code），可以看到如下右侧项目代码文件结构：

如果过了解过网页开发的基础知识，会知道我们看到的网页都是html，然后通过css和js在html上添加样式以及交互效果。所以我们可以点开项目根目录的index.html，看到代码内容如下：

index.html内容中的</code>与我们看到的页面tab名称是对应的，说明我们看到的确实是这个<code>html</code>里面的内容。但是<code></code>标签中并没有内容，那么我们在页面上看到的<code>vue</code>图片、文字和链接是哪来的呢？</p><p><font color="#009C95"><strong>这里提两种探索的方法</strong></font>：</p><h4>方法一：搜索关键内容</h4><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/58b1d3b04f324b2c84c6a9e19a29015b.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/58b1d3b04f324b2c84c6a9e19a29015b.png" /><br /> 我们看到页面有三个文本，所以我们可以直接用IDE搜索这三条文本所在位置，如下：<br /> <noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/7e9d26a7c1734f00a0804de4edd786ba.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/7e9d26a7c1734f00a0804de4edd786ba.png" />我们尝试修改一下找到的<code>HelloWolrd.vue</code>中的<code>Welcom to Your Vue.js App</code>，改成<code>Hello Vue World!</code>并保存，然后刷新浏览器查看页面是否发生变化，可以看到页面如下：<br /> <noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/edb6e1a6ced04e27ad86e4cbfd042a95.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/edb6e1a6ced04e27ad86e4cbfd042a95.png" />页面内容确实跟预期一样发生了变化。再去看<code>HelloWorld.vue</code>文件中的其他内容，可以看到浏览器页面里展示的其他内容也都在这个代码文件中。</p><p><font color="#009C95"><strong>所以我们可以确定，如果我们想修改页面内容只需要修改<code>HelloWorld.vue</code>即可</strong></font></p><p>同样地，当我们想进一步去探索<code>vue</code>是如何知道要把<code>HelloWorld.vue</code>的内容渲染到浏览器页面上的，我们就可以搜索<code>HelloWorld.vue</code>，看哪里用到了这个文件。由于<code>HelloWorld.vue</code>搜索结果为空，于是我们改成搜索<code>HelloWorld</code>，搜索结果如下：</p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/16452e80c37e430590f7b6c791b2f510.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/16452e80c37e430590f7b6c791b2f510.png" />我们可以看到，这是在一个<code>router</code>目录下<code>index.js</code>文件中，根据名称可以知道，<code>router</code>控制路由（即浏览器地址到代码文件的对应）, <code>index.js</code>是入口文件。代码中写明对于<code>path</code>为<code>/</code>的，对应到的导入的<code>HelloWorld</code>代码，这意味着对于地址<code>http://localhost:8080/#/</code>（<code>#</code>后面是<code>/</code>），会使用<code>/</code>对应的<code>HelloWorld</code>进行页面渲染。</p><h4>方法二：看目录</h4><p>使用标准化工具来组织代码的好处是，文件的位置和命令都有迹可循。我们看到根目录下<code>index.html</code>之外的文件名字都表明这些文件是一些配置相关的文件。而其他文件夹根据名字可以知道：</p><ul><li><code>build</code>是写好代码之后构建完毕用于部署到服务器上的文件夹</li><li><code>config</code>是用来放配置的目录</li><li><code>node_modules</code>存放项目相关的依赖包</li><li><code>src</code>是<code>source</code>的缩写，所以是存放源代码的地方</li><li><code>static</code>是静态的意思，该目录是用来存放一些静态文件的地方</li><li><code>test</code>是放代码测试文件的地方</li></ul><p>所以如果我们要查找页面的内容（涉及代码，属于可改变的内容而非静态文件），应该在<code>src</code>目录下找，打开<code>src</code>目录，可以看到三个目录和两个文件。一般来说，直接存放在目录下的，是类似于”程序入口”一样的文件。根据文件名称，我们班先尝试打开<code>main.js</code>，查看内容<br /> <noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/ae93a4bfff8c49e882065410186f3c11.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/ae93a4bfff8c49e882065410186f3c11.png" /><br /> 可以看到<code>main.js</code>里面<code>import</code> 导入了一些东西，虽然我们不知道具体是什么，但是我们的代码是标准化的，所以根据命名，可以推测：</p><ul><li><code>App</code>作为appliaction（应用）的简写，应该代表跟应用相关的内容；</li><li><code>router</code>是路由器的意思，所以应该是控制网页路由的部分。路由就是道路向导的意思，指的是告诉浏览器地址栏输入的地址对应着代码中哪一部分的内容。</li><li><code>Vue</code>是我们用的前端框架的名称。前端框架就是生成页面内容的工具，所以这里使用了<code>vue()</code>，并且传入了<code>App</code>和<code>router</code>这两部分内容，以及我们看到了<code>#app</code>这个用法，<code>app</code>是我们在<code>index.html</code>代码中看到的<code></code>的id，所以这里应该是定位到了<code>index.html</code>的body位置</li></ul><p>根据以上三点，我们可以基本确定，我们在浏览器中看到的内容就是从这里传到<code>index.html</code>并被浏览器展示出来的。</p><p>进一步，我们查看<code>App</code>的内容，看页面的图片和文字是如何引入到页面的，打开<code>App.vue</code>之后，可以看到内容如下：</p><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/2508490c814541d99b3cd39940bf9bf6.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/2508490c814541d99b3cd39940bf9bf6.png" />我们看到光标所在位置有一个<code><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/43a51a43c74f4dd694372e6d5d5f566f.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/43a51a43c74f4dd694372e6d5d5f566f.png" />于是我们果断打开<code>HelloWorld.vue</code>，可以看到浏览器页面展示的内容基本都在<code>HelloWorld</code>里面了：<br /> <noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/7c58ed6288c444abad7edae0667f1000.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/7c58ed6288c444abad7edae0667f1000.png" />但是我们看到代码中的<code></p><h1></code>内容不是我们在浏览器看到的<code>Welcome to Your Vue.js App</code>而是<code>{{ msg }}</code>，可以推测这里是一个变量引用的方式，<code>msg</code>的值应该是<code>Welcome to Your Vue.js App</code>，所以我们搜索找到<code>msg</code>位置如下：<br /> <noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/0bd70f24f8f64e07af34879a37071737.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/0bd70f24f8f64e07af34879a37071737.png" />如我们所料，<code>msg</code>的值是<code>Welcome to Your Vue.js App</code>，于是我们将值改成<code>Hello Vue World!</code>，并刷新页面，可以看到页面内容如下：<br /> <noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/ca980ca817594108888c1bc035730106.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/ca980ca817594108888c1bc035730106.png" />页面展示的标题文本变成了我们修改后的内容。<br /> 我们的推测都得到了验证，我们也明白了<code>vue</code>是如何将代码渲染到浏览器的。</p><p><font color="#009C95"><strong>至此，我们通过一个HelloWorld项目掌握了vue如何将浏览器地址对应到具体代码，标准化的代码文件结构以及如何修改代码使得页面展示我们希望的内容。</strong> </font><br /> <font color="#009C95"><strong><code>vue</code>入门，(●ˇ∀ˇ●) 达成✔</strong> </font></p><blockquote><p><font color="#009C95"><strong>写文不易，如果对你有帮助的话，来一波点赞、收藏、关注吧~</strong></font></p></blockquote></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/42056/" title="解决PyCharm中出现Error: Python packaging tool ‘setuptools‘ not found" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/8bc67c9628bf4e6b8063cb6066a3ba9e.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/42056/" title="解决PyCharm中出现Error: Python packaging tool ‘setuptools‘ not found">解决PyCharm中出现Error: Python packaging tool ‘setuptools‘ not found</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/49769/" title="【2024华为OD机试C卷】410、小华地图寻宝、小华最多能得到多少克黄金 | 机试真题+思路参考+代码解析（C语言、C++、Java、Py、JS）" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/49769/" title="【2024华为OD机试C卷】410、小华地图寻宝、小华最多能得到多少克黄金 | 机试真题+思路参考+代码解析（C语言、C++、Java、Py、JS）">【2024华为OD机试C卷】410、小华地图寻宝、小华最多能得到多少克黄金 | 机试真题+思路参考+代码解析（C语言、C++、Java、Py、JS）</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/10000/" title="Docker利用Nginx部署前端项目" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/654b1cdbbd6a47bd8dafac514a64efde.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/10000/" title="Docker利用Nginx部署前端项目">Docker利用Nginx部署前端项目</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/7369/" title="less变量" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/0fa94b2d95104ed9a4fa809f63f3bb08.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/7369/" title="less变量">less变量</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/38989/" title="正则表达式详解及C语言中的正则表达式函数" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/38989/" title="正则表达式详解及C语言中的正则表达式函数">正则表达式详解及C语言中的正则表达式函数</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/27264/" title="选择排序（c语言）" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/27264/" title="选择排序（c语言）">选择排序（c语言）</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/50037/" title="centos8之Oracle Database 23c免费版安装" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/b358bcc07321436e8579840f14deb579.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/50037/" title="centos8之Oracle Database 23c免费版安装">centos8之Oracle Database 23c免费版安装</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/34212/" title="gRPC之gRPC负载均衡(客户端负载均衡)(etcd)" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/6fedb98d3b1a442590683735a4561461.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/34212/" title="gRPC之gRPC负载均衡(客户端负载均衡)(etcd)">gRPC之gRPC负载均衡(客户端负载均衡)(etcd)</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT：强强联合Langchain-Vicuna的应用实战开源项目，彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle：世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库：第三章 关系数据库标准语言SQL（二）数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开，原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通：从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/4155/" title="巧用 “火焰图” 快速分析链路性能" data-bg="https://img.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2986164/202210/2986164-20221031171749747-493541505.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/4155/" title="巧用 “火焰图” 快速分析链路性能">巧用 “火焰图” 快速分析链路性能</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/20092/" title="Android Studio App开发实战项目之实现淘宝电商App首页界面（附源码，可用于大作业参考）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/c06d5b90f954437abbcc52fe4d3d8572.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/20092/" title="Android Studio App开发实战项目之实现淘宝电商App首页界面（附源码，可用于大作业参考）">Android Studio App开发实战项目之实现淘宝电商App首页界面（附源码，可用于大作业参考）</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/16083/" title="chatgpt帮我写的一个小程序气泡框代码" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/a5e249d511a34b36bf05f49e68a9f865.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/16083/" title="chatgpt帮我写的一个小程序气泡框代码">chatgpt帮我写的一个小程序气泡框代码</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/28498/" title="【原创】BGP建立邻居前的几种状态(BGP有限状态机)" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/3268718/202309/3268718-20230918175314735-740625622.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/28498/" title="【原创】BGP建立邻居前的几种状态(BGP有限状态机)">【原创】BGP建立邻居前的几种状态(BGP有限状态机)</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/57565/" title="python：超详细OpenCV入门" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/5b59fd67bc634909a0e32f21309ad09c.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/57565/" title="python：超详细OpenCV入门">python：超详细OpenCV入门</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/2726/" title="Computer Network (Top-Down Approach) Learning Record — 2.7 TCP & UDP Socket Programming" data-bg="https://img.inotgo.com/imagesLocal/202209/22/202209220546592205_0.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/2726/" title="Computer Network (Top-Down Approach) Learning Record — 2.7 TCP & UDP Socket Programming">Computer Network (Top-Down Approach) Learning Record — 2.7 TCP & UDP Socket Programming</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"25661","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"53e964f340","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>