VueUse Head npm是什么？怎么用？

terry 4天前阅读数 28 #Vue

文章标签 Head

在前端开发的世界里,随着技术的不断发展和框架的日益丰富，各种工具和库层出不穷，为开发者带来了极大的便利，VueUse Head npm就是其中一个备受关注的工具，那么它究竟是什么？又该如何使用呢？下面我们就来详细了解一下。

VueUse Head npm是什么

VueUse Head npm是一个基于Vue.js的实用工具库，它主要用于管理页面的头部信息，比如标签、<meta>标签等，在Vue项目中，我们经常需要动态地设置页面的标题、描述等元数据，VueUse Head npm就为我们提供了一种简洁高效的方式来实现这一功能。</p> <p>它的出现,解决了传统方式下手动操作DOM来设置头部信息的繁琐和不便，通过VueUse Head npm，我们可以在Vue组件中以声明式的方式轻松管理页面的头部内容，使代码更加清晰、易于维护。</p> <h2>VueUse Head npm的安装</h2> <p>要使用VueUse Head npm，首先需要进行安装，在你的Vue项目目录下，打开终端，输入以下命令：</p> ```bash npm install @vueuse/head ``` <p>或者如果你使用的是yarn,命令则是：</p> ```bash yarn add @vueuse/head ``` <p>安装完成后,就可以在项目中引入并使用了。</p> <h2>VueUse Head npm的基本使用</h2> <h3>（一）在Vue组件中使用</h3> <p>在Vue组件中使用VueUse Head npm非常简单，在组件的<script>标签中引入：</p> ```javascript import { useHead } from '@vueuse/head' ``` <p>在组件的setup函数中使用：</p> ```javascript export default { setup() { useHead({ title: '我的页面标题', meta: [ { name: 'description', content: '这是一个关于VueUse Head npm的页面描述' } ] }) return {} } } ``` <p>这样,在页面渲染时，就会自动设置<title>标签为“我的页面标题”，并添加相应的 <h3>（二）动态更新头部信息</h3> <p>我们需要根据用户的操作或者数据的变化来动态更新头部信息,VueUse Head npm也支持这一点，我们有一个按钮，点击它可以改变页面标题：</p> ```html <template> <button @click="changeTitle"></button> </template> <script> import { useHead } from '@vueuse/head' import { ref } from 'vue' <p>export default { setup() { const title = ref('初始标题') useHead({ title: () => title.value })</p> <pre><code>const changeTitle = () => { title.value = '新标题' } return { changeTitle }</code></pre> </script> ``` <p>在这个例子中,我们使用了Vue的响应式数据ref，当点击按钮时，title的值发生变化，页面的标题也会随之更新。</p> <h2>VueUse Head npm的高级用法</h2> <h3>（一）多个Head实例</h3> <p>在一些复杂的项目中,可能需要多个Head实例来管理不同部分的头部信息，VueUse Head npm也支持这种情况，我们有一个主应用和一个子组件，都需要设置自己的头部信息：</p> ```javascript // 主应用 import { useHead } from '@vueuse/head' <p>useHead({ '主应用标题', meta: [ { name: 'application-name', content: '主应用' } ] })</p> <p>// 子组件 export default { setup() { useHead({ title: '子组件标题', meta: [ { name: 'component-name', content: '子组件' } ] }) return {} } }</p> <pre><code><p>这样，主应用和子组件的头部信息会合并显示，子组件的信息会覆盖主应用中相同类型的信息（比如标题）。</p> ### （二）与Vue Router结合 <p>在Vue项目中，Vue Router是常用的路由管理工具，VueUse Head npm可以很好地与Vue Router结合，根据不同的路由设置不同的头部信息。</p> ```javascript import { useHead } from '@vueuse/head' import { useRoute } from 'vue-router' export default { setup() { const route = useRoute() useHead({ title: () => { switch (route.name) { case 'home': return '首页' case 'about': return '关于我们' default: return '默认标题' } } }) return {} } }</code></pre> <p>在这个例子中,根据当前路由的名称，动态设置页面的标题。</p> <p>VueUse Head npm是一个非常实用的工具，它为Vue开发者提供了一种简洁、高效的方式来管理页面的头部信息，无论是基本的静态设置，还是动态更新、复杂场景下的多个实例以及与其他工具（如Vue Router）的结合使用，都能轻松应对，通过本文的介绍，相信你对VueUse Head npm有了更深入的了解，希望你在今后的Vue项目开发中能够充分利用它，提升开发效率，打造出更加优质的前端应用。</p> <div class="rights"> <h5>版权声明</h5> <p>本文仅代表作者观点，不代表Code前端网立场。<br>本文系作者Code前端网发表，如需转载，请注明页面地址。</p> </div> </div> <div class="Prev_Next"> <span>上一篇：<a href="https://www.codeqd.com/post/20250520559.html">如何在 VueUse 中使用 height 相关功能？</a></span> <span>下一篇：<a href="https://www.codeqd.com/post/20250520561.html">VueUse Hotkey，前端交互的魔法密钥</a></span> </div> </div> <div class="related main_list"> <div class="title">相关文章</div> <ul> <li> <strong> <a href="https://www.codeqd.com/post/20250520617.html" title="Vueuse中的debounce watch是什么？有什么用？">Vueuse中的debounce watch是什么？有什么用？</a> </strong> <div class="listleft"> <p><a href="https://www.codeqd.com/post/20250520617.html">在Vue开发中，我们常常会遇到需要监听数据变化并执行相应操作的情况，而Vueuse提供的debounce watch（防...</a></p> <div class="listtag"> <a href="https://www.codeqd.com/tags/debounce%20watch/" target="_blank">debounce watch</a> </div> <div class="listinfo"> <span class="time">39分钟前</span> <span class="vew">4阅读</span> <span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span> </div> </div> <div class="img"> <a href="https://www.codeqd.com/post/20250520617.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/5.jpg" alt="Vueuse中的debounce watch是什么？有什么用？"></a> </div> </li> <li> <strong> <a href="https://www.codeqd.com/post/20250520616.html" title="VueUse Draggable List 是什么？怎么用？">VueUse Draggable List 是什么？怎么用？</a> </strong> <div class="listleft"> <p><a href="https://www.codeqd.com/post/20250520616.html">在前端开发中,用户体验是至关重要的一环，而实现列表的拖拽功能，能够让用户更加直观、便捷地操作数据，VueUse Drag...</a></p> <div class="listtag"> <a href="https://www.codeqd.com/tags/VueUse/" target="_blank">VueUse</a><a href="https://www.codeqd.com/tags/Draggable%20List/" target="_blank">Draggable List</a> </div> <div class="listinfo"> <span class="time">2小时前</span> <span class="vew">4阅读</span> <span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span> </div> </div> <div class="img"> <a href="https://www.codeqd.com/post/20250520616.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/9.jpg" alt="VueUse Draggable List 是什么？怎么用？"></a> </div> </li> <li> <strong> <a href="https://www.codeqd.com/post/20250520615.html" title="VueUse Drag and Drop 怎么用？看完这篇就懂了！">VueUse Drag and Drop 怎么用？看完这篇就懂了！</a> </strong> <div class="listleft"> <p><a href="https://www.codeqd.com/post/20250520615.html">在前端开发中,实现拖拽功能是一个常见的需求，VueUse 提供了 Drag and Drop 工具，能让我们轻松实现这一...</a></p> <div class="listtag"> <a href="https://www.codeqd.com/tags/VueUse/" target="_blank">VueUse</a><a href="https://www.codeqd.com/tags/%E6%8B%96%E6%8B%BD/" target="_blank">拖拽</a> </div> <div class="listinfo"> <span class="time">3小时前</span> <span class="vew">3阅读</span> <span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span> </div> </div> <div class="img"> <a href="https://www.codeqd.com/post/20250520615.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/9.jpg" alt="VueUse Drag and Drop 怎么用？看完这篇就懂了！"></a> </div> </li> <li> <strong> <a href="https://www.codeqd.com/post/20250520614.html" title="VueUse Docs Utils是什么？">VueUse Docs Utils是什么？</a> </strong> <div class="listleft"> <p><a href="https://www.codeqd.com/post/20250520614.html">VueUse Docs Utils是VueUse工具库中的一部分，它包含了一系列实用的工具函数，这些函数可以帮助开发者更...</a></p> <div class="listtag"> <a href="https://www.codeqd.com/tags/Utils/" target="_blank">Utils</a> </div> <div class="listinfo"> <span class="time">4小时前</span> <span class="vew">3阅读</span> <span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span> </div> </div> <div class="img"> <a href="https://www.codeqd.com/post/20250520614.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/1.jpg" alt="VueUse Docs Utils是什么？"></a> </div> </li> <li> <strong> <a href="https://www.codeqd.com/post/20250520613.html" title="VueUse Dialog 是什么？怎么用？一文带你深入了解">VueUse Dialog 是什么？怎么用？一文带你深入了解</a> </strong> <div class="listleft"> <p><a href="https://www.codeqd.com/post/20250520613.html">在前端开发的世界里，VueUse 是一个备受关注的工具库，其中的 Dialog（对话框）功能更是为开发者提供了便捷的交互...</a></p> <div class="listtag"> <a href="https://www.codeqd.com/tags/Dialog/" target="_blank">Dialog</a> </div> <div class="listinfo"> <span class="time">13小时前</span> <span class="vew">8阅读</span> <span class="cat"><a href="https://www.codeqd.com/vue/">#Vue</a></span> </div> </div> <div class="img"> <a href="https://www.codeqd.com/post/20250520613.html"><img src="https://www.codeqd.com/zb_users/theme/yd1125free/include/random/8.jpg" alt="VueUse Dialog 是什么？怎么用？一文带你深入了解"></a> </div> </li> </ul> </div> <div class="commentbox"> <label id="AjaxCommentBegin"></label>   <div class="pagebar commentpagebar"> </div> <label id="AjaxCommentEnd"></label>  <div class="post" id="divCommentPost"> <p class="posttop"><a name="comment">发表评论:</a><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;"><small>取消回复</small></a></p> <form id="frmSumbit" target="_self" method="post" action="https://www.codeqd.com/zb_system/cmd.php?act=cmt&postid=20560&key=c73805aba35dac9a65e54a6c5e0c9c6f" > <input type="hidden" name="inpId" id="inpId" value="20560" /> <input type="hidden" name="inpRevID" id="inpRevID" value="0" /> <p><input type="text" name="inpName" id="inpName" class="text" value="访客" size="28" tabindex="1" /> <label for="inpName">名称(*)</label></p> <p><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" /> <label for="inpEmail">邮箱</label></p> <p><input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" /> <label for="inpHomePage">主页</label></p> <p style="display:none;"><label for="txaArticle">正文(*)</label></p> <p><textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" ></textarea></p> <p><input name="sumbit" type="submit" tabindex="6" value="提交" onclick="return zbp.comment.post()" class="button" /></p> </form> <p class="postbottom">◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。</p> </div></div> </div>  <div class="main_side"> <div class="widget widget_user"> <div class="userimg"> <img src="https://www.codeqd.com/zb_users/avatar/0.png" alt="terry"/> <p><a href="https://www.codeqd.com/author-1.html" target="_blank">terry</a></p> </div> <div class="userpost"> <h5>作者文章</h5> <ul> <li> <a href="https://www.codeqd.com/post/20250520617.html" target="_blank">Vueuse中的debounce watch是什么？有什么用？</a> <span>39分钟前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520616.html" target="_blank">VueUse Draggable List 是什么？怎么用？</a> <span>2小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520615.html" target="_blank">VueUse Drag and Drop 怎么用？看完这篇就懂了！</a> <span>3小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520614.html" target="_blank">VueUse Docs Utils是什么？</a> <span>4小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520613.html" target="_blank">VueUse Dialog 是什么？怎么用？一文带你深入了解</a> <span>13小时前</span> </li> </ul> </div> <div class="umore"> <a href="https://www.codeqd.com/author-1.html" target="_blank" rel="nofollow">浏览更多</a> </div> </div> <div class="widget widget_hot"> <div class="title">热门</div> <ul> <li> <i>1</i> <a href="https://www.codeqd.com/post/20231020062.html" target="_blank"> <strong>如何为C++函数进行重载</strong> <span>一、什么是函数的重载函数的重载是指在同一作用域下，可以定义多个同名函数，但是这些同名函数的参数列表必须不同。参数的不同可以是数量上的不同、类型上的不同、顺序上的不同等，只要这些函数的参数列表不完全一致即可。二、如何实现函数的重载 1...</span> </a> </li><li> <i>2</i> <a href="https://www.codeqd.com/post/20231020059.html" target="_blank"> <strong>跳过当前迭代并进入下一次迭代</strong> <span>一、概述在C++中，跳过当前迭代并进入下一次迭代可以使用continue语句来实现。当循环遇到continue语句时，将会立即转到下一次循环的开始处，而不执行当前循环中剩余的代码。通常情况下，continue语句用于在循环中处理特定的情...</span> </a> </li><li> <i>3</i> <a href="https://www.codeqd.com/post/20231020060.html" target="_blank"> <strong>C++编程技巧分享</strong> <span>一、C++中的const C++中的const限定符可以用于变量、函数参数、函数返回类型等多种情况。使用const限定符可以使代码更加安全、简洁、易于维护。 1、 const变量 const变量在定义后就不能被修改，这使得代码更加安全...</span> </a> </li><li> <i>4</i> <a href="https://www.codeqd.com/post/20231120069.html" target="_blank"> <strong>Vue应用开发笔记：Electron Vue开发的实际应用案例</strong> <span>今天，我们来介绍下Electron Vue开发的实际应用案例，一起往下学习吧！开头：Electron Vue开发的实际应用案例随着移动互联网的不断普及，桌面应用程序的需求也越来越多。而Electron Vue作为一种基于JavaScript...</span> </a> </li><li> <i>5</i> <a href="https://www.codeqd.com/post/20231020061.html" target="_blank"> <strong>高效处理时间的C++实现</strong> <span>在C++编程中，处理时间是很重要的一环。而对于大规模问题，如数据处理、机器学习、计算机视觉等领域，时间的效率更是至关重要。本文将从多个方面阐述如何在C++编程中高效处理时间。一、使用STL算法 STL（标准模板库）是C++的一个重要部分...</span> </a> </li><li> <i>6</i> <a href="https://www.codeqd.com/post/20231020063.html" target="_blank"> <strong>C++文件读写实现：快速、高效、可靠的数据存储和读取</strong> <span>一、读写文件的基础操作在C++中，读写文件需要用到fstream库，包含在头文件中。使用fstream，需构建一个fstream对象，然后通过对象实现文件的读写。读取文件，步骤如下： fstream file; // 定义对象...</span> </a> </li><li> <i>7</i> <a href="https://www.codeqd.com/post/20231020064.html" target="_blank"> <strong>使用C++文件流读写文件</strong> <span>一、文件流介绍 C++文件流提供了一种方便的机制来读写文件，并且支持二进制和文本格式的文件。流是一种抽象的数据类型，用于表示在程序和外部设备之间的数据流。C++ 文件流库定义了几个流类，其中最常见的有 ifstream 用于从文件中读取数据...</span> </a> </li><li> <i>8</i> <a href="https://www.codeqd.com/post/2023095.html" target="_blank"> <strong>新手必须掌握的 10 个 CSS 技能</strong> <span>每个人都应该知道的 CSS 技巧，以提高生产力并快速完成项目。这里我为初学者收集了10个简单且必须知道的秘诀。重置.css 某些浏览器对每个元素应用不同的样式，因此最好首先休息一下 CSS。 body, div, h1,h2,...</span> </a> </li><li> <i>9</i> <a href="https://www.codeqd.com/post/20231120070.html" target="_blank"> <strong>30 个 Vue.js 项目实例：提升前端开发技能</strong> <span>前端开发技能的提升在现代的软件开发行业中变得至关重要。随着越来越多的应用程序使用Web技术来构建，并且Vue.js作为一种流行的JavaScript框架迅速崛起，学习和掌握Vue.js已成为前端开发者的必备技能之一。在这篇文章中，我们将介绍...</span> </a> </li><li> <i>10</i> <a href="https://www.codeqd.com/post/20231120067.html" target="_blank"> <strong>在Vue项目中使用i18n进行国际化支持</strong> <span>Vue.js是一款流行的JavaScript框架，被广泛应用于Web应用程序的开发中。随着全球化的发展，越来越多的应用需要提供多语言支持，以满足不同地区用户的需求。在Vue项目中，可以使用i18n插件来实现国际化支持，使应用程序能够根据用户...</span> </a> </li> </ul> </div> <div class="widget widget_previous"> <div class="title">最新文章</div> <ul> <li> <a href="https://www.codeqd.com/post/20250520617.html" target="_blank" title="Vueuse中的debounce watch是什么？有什么用？">Vueuse中的debounce watch是什么？有什么用？</a> <span>39分钟前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520616.html" target="_blank" title="VueUse Draggable List 是什么？怎么用？">VueUse Draggable List 是什么？怎么用？</a> <span>2小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520615.html" target="_blank" title="VueUse Drag and Drop 怎么用？看完这篇就懂了！">VueUse Drag and Drop 怎么用？看完这篇就懂了！</a> <span>3小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520614.html" target="_blank" title="VueUse Docs Utils是什么？">VueUse Docs Utils是什么？</a> <span>4小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520613.html" target="_blank" title="VueUse Dialog 是什么？怎么用？一文带你深入了解">VueUse Dialog 是什么？怎么用？一文带你深入了解</a> <span>13小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520612.html" target="_blank" title="如何理解和运用 VueUse 中的 debounce computed？">如何理解和运用 VueUse 中的 debounce computed？</a> <span>14小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520611.html" target="_blank" title="VueUse Element，前端开发的得力助手">VueUse Element，前端开发的得力助手</a> <span>15小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520610.html" target="_blank" title="VueUse 的 emit 到底是什么？怎么用？">VueUse 的 emit 到底是什么？怎么用？</a> <span>16小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520609.html" target="_blank" title="VueUse 的 EventListener 怎么用？">VueUse 的 EventListener 怎么用？</a> <span>17小时前</span> </li> <li> <a href="https://www.codeqd.com/post/20250520608.html" target="_blank" title="VueUse Element Visibility，让网页元素交互更智能">VueUse Element Visibility，让网页元素交互更智能</a> <span>18小时前</span> </li> </ul> </div> <div class="widget widget_tags"> <div class="title">标签列表</div> <ul><li><a target="_blank" href="https://www.codeqd.com/tags/PHP/">PHP</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20microtime/">PHP microtime</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/Mysql/">Mysql</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20dirname%28%29/">PHP dirname()</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20Select/">PHP Select</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/str_replace%E5%87%BD%E6%95%B0/">str_replace函数</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/sscanf%E5%87%BD%E6%95%B0/">sscanf函数</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%E7%9A%84Explode%E5%87%BD%E6%95%B0/">PHP的Explode函数</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20sort/">PHP sort</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/in_array%28%29/">in_array()</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/addAttribute/">addAttribute</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/MD5%E5%80%BC/">MD5值</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%E5%B7%A5%E7%A8%8B%E5%B8%88/">PHP工程师</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/">PHP正则表达式</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/PHP%20Date%28%29/">PHP Date()</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/%E6%95%B0%E6%8D%AE%E5%BA%93/">数据库</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/php%E8%BF%9E%E6%8E%A5mysql/">php连接mysql</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/phpmysql/">phpmysql</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/mybatis/">mybatis</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/jsp%E8%BF%9E%E6%8E%A5mysql/">jsp连接mysql</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/navicatmysqllinux/">navicatmysqllinux</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/MySQL%20Workbench/">MySQL Workbench</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/MySQL%E6%95%B0%E6%8D%AE%E5%BA%93/">MySQL数据库</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/mysql%20cte/">mysql cte</a></li><li><a target="_blank" href="https://www.codeqd.com/tags/Linux/">Linux</a></li></ul> </div> </div></div> <div class="footer"> <div class="container">Copyright by <a href="/">code前端网</a> All Rights Reserved.<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">粤ICP备12067512号-4</a> <p style="display:none;"> Powered By <a href="https://www.zblogcn.com/" title="Z-BlogPHP 1.7.4 Build 173430" target="_blank" rel="noopener noreferrer">Z-BlogPHP</a> Theme By <a href="https://www.htmlit.com.cn/" target="_blank">编程老白</a></p></div> </div><div id="goTop" class="goTop"><i class="fa fa-angle-up"></i></div><script src="https://www.codeqd.com/zb_users/theme/yd1125free/script/common.js?v=1.2.4" type="text/javascript"></script> <script src="https://www.codeqd.com/zb_users/theme/yd1125free/script/custom.js?v=1.2.4" type="text/javascript"></script> <script>jQuery(document).ready(function($) {jQuery('.main_left').theiaStickySidebar({ additionalMarginTop: 10,});});</script><script src="https://www.codeqd.com/zb_users/plugin/YtUser/style/js/frontend.js"></script> <script src="https://www.codeqd.com/zb_users/plugin/FY_Prettify/prettify.js" type="text/javascript"></script> <script type="text/javascript">var zbPath="https://www.codeqd.com/", codeAll = 0, copyRights = 1, copyTips = "本段代码来自 ", codeText = 0, textHeight = 200, sButton = "0|0|0|0", codeFold = 0; document.writeln(unescape("%3Cscript src=\""+zbPath+"zb_users/plugin/Codemo_vip/js/main.js?v=3.3.0\" type=\"text/javascript\"%3E%3C/script%3E"));</script> </body> </html>