鱼与熊掌可兼得，使用vue的全局构建版和Jquery开发网站

传统开发网站一般使用Jquery来操作dom，现在Jquery虽然还在更新(2024年4月28日)，但是感觉还是Vue的响应式好一点，我只需要修改数据源就可以了，UI可以自动刷新，不用再操作dom了。

但是Jquery还是非常强大的。

单独使用Jquery可以享受丰富的Jquery插件，丰富的dom操作api，但是如果页面里想引入公共部分(比如公共Header和公共Footer)就不是很方便了；

单独使用Vue的话，在配合一些UI框架(Element)等，使用起来也不是很方便，不如使用Jquery+JqueryUI(jQuery插件)来的简单

所以就可能既使用Jquery又使用Vue。

平常使用Vue都是结合webpack或者View等构建工具，通过单文件组件(SFC)进行开发，一旦脱离了构建工具，使用全局构建版本，突然就不知道怎么使用Vue了。这篇文章就来纪念一下全局构建版本的基础使用

在生产环境，建议使用.prod结尾的构建版本
在全局构建版本里所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上
把公共Header和公共Footer单独抽出来，在每个页面引入

代码案例

公共组件jscommon-component.js

复制代码

const Header = {
    template:`
    <div class="wrapper header" id="header">
        <div class="topbanner"></div>
        <ul class="navmenu">
            <li><a href="index.html">网站首页</a></li>
            <li><a href="list-1-1.html">概况</a></li>
            <li><a href="list-6-1.html">要闻</a></li>
        </ul>
    </div>
    `
}

Html页面

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <script src="./js/jquery-3.6.2.min.js" type="text/javascript"></script>
    <script src="./js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>
    <script type="text/javascript" src="./js/vue.3.4.25.js"></script>
    <script type="text/javascript" src="./js/common-component.js"></script>
</head>
<body>
<div id="app">
<page-header></page-header>
<div>count:{{count}}</div>
</div>
<script>
    const {createApp, ref,onMounted} = Vue
    createApp({
        setup() {
            const count = ref(2)
            onMounted(()=>{
                setTimeout(()=>{count.value = 4},2000)
            })
            return {count}
        }
    }).component('page-header', Header).mount("#app")
</script>
</body>
</html>

可以在这个基础之上再结合axios，感觉做网站达到了灵活，快速，可能也利于优化seo。

对于构建小型网站或者想要优化SEO或者不想重新打包文件就可以修改网站内容，那么可以使用这种方式