在普通的html页面用Vue3组合式API写的项目（无需Node.js环境和构建项目）

头像
TANKING
     广东
    阅读 12 分钟
    1

    摘要

    Vue.js的优点有很多，但是其使用门槛对于只学习过普通的项目的同学来说，还是比较有挑战性的，如果你真的想把Vue学的很溜，真的需要一个非常系统的学习才能运用起来。因为学习Vue你不仅仅是学习他的语法、API和一些开发的规范，你还要学习构建工具的使用、调试、打包等等，有些人连最基本的开发环境都还没能顺利搭建起来。

    如果你不想使用Vue强大的生态和工具，只想在html页面中使用Vue也是可以的，因为Vue也有一个全局的生产环境cdn（vue.global.prod.min.js），你可以使用这个cdn来使用Vue构建比较小型的项目。

    项目介绍

    写这篇文章的原因是我使用了Vue3的组合式Api实现了一个非常简单的单页，具体信息如下：

    项目：围绕广东省3+证书招生考试信息为数据，开发一个招生院校、招生专业信息查询和展示页面。

    数据：广东3+证书招生院校目录、招生专业目录。

    项目截图：

    bb644eb18e3e26a076ea64245cd37d7.jpg

    代码结构：

    image.png

    上代码

    index.html

    代码中引入了 vue.global.prod.min.js 用于使用Vue的API，引入了 vue-router.js 实现路由功能，引入了 axios.min.js 实现请求接口获取数据。

    在app节点下通过 <router-view></router-view> 渲染对应路由的内容。

    关键的代码都在 app.js 中使用Vue3的组合式API实现数据请求和数据响应式渲染。所以通过模块的方式引入了 app.js

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>广东省3+证书（中职）招生计划</title>
    <script src="js/vue.global.prod.min.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/app.css">
    <style>
        .college-card {
            width: 100%;
            display: flex;
            border-bottom: 1px solid #eee;
            background: #fff;
        }
        .college-card .college-logo {
            width: 90px;
        }
        .college-card .college-logo img {
            width: 55px;
            height: 55px;
            margin: 25px 15px 15px 20px;
            border-radius: 100px;
        }
        .college-card .college-info {
            flex: 1;
        }
        .college-card .college-name {
            width: 100%;
            height: 45px;
            line-height: 45px;
            font-size: 17px;
            font-weight: bold;
            color: #333;
        }
        .college-card .college-category {
            width: 100%;
            height: 25px;
        }
        .college-card .college-category .tag {
            background: #fff4ef;
            color: #ff7637;
            padding: 3px 6px;
            font-size: 12px;
            margin-right: 8px;
            border-radius: 5px;
        }
        .college-card .college-plan {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #999;
            padding-bottom: 5px;
        }
        .college-card .next {
            width: 30px;
            background: url('img/next.png')no-repeat;
            background-size: 80%;
            background-position: center;
            opacity: 0.5;
        }
        
        .college-info {
            background: #fff;
        }
        .college-info .info-header {
            width: 100%;
            margin: 0 auto;
            display: flex;
            border-bottom: 1px solid #eee;
            padding-top: 15px;
        }
        .college-info .info-header .info-logo {
            width: 90px;
        }
        .college-info .info-header .info-logo img {
            width: 60px;
            height: 60px;
            margin: 25px 15px 15px 10px;
            border-radius: 100px;
        }
        .college-info .info-header .info {
            flex: 1;
        }
        .college-info .info-header .info .college-name {
            width: 100%;
            height: 45px;
            line-height: 45px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .college-info .info-header .info .college-tag {
            width: 100%;
            height: 25px;
        }
        .college-info .info-header .info .college-tag .info-tag {
            background: #fff4ef;
            color: #ff7637;
            padding: 3px 6px;
            font-size: 12px;
            margin-right: 8px;
            border-radius: 5px;
        }
        .college-info .info-header .info .info-plan {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #999;
        }
        
        .college-info-nav {
            width: 100%;
            display: flex;
        }
        .college-info-nav .nav-tag {
            flex: 1;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 15px;
            color: #666;
        }
        
        .college-info-plan {
            width: 95%;
            background: #fff;
            margin: 15px auto 0;
            overflow: hidden;
            border-radius: 10px;
        }
        .college-info-plan .college-info-plan-year {
            width: 93%;
            height: 30px;
            margin: 15px auto 0;
        }
        .college-info-plan .college-info-plan-year .plan-year {
            padding: 6px 10px;
            background: #eee;
            font-size: 15px;
            margin-right: 10px;
            border-radius: 10px;
            color: #666;
        }
        .college-info-plan .college-info-plan {
            width: 93%;
            height: 30px;
            margin: 10px auto;
            font-size: 14px;
        }
        
        .college-info-plan .college-info-plan-zyz {
            width: 93%;
            height: 20px;
            margin: 10px auto 0;
            font-size: 15px;
            color: #ff7637;
            font-weight: bold;
        }
        .college-info-plan .college-info-zyz-plan {
            width: 93%;
            height: 20px;
            margin: 5px auto;
            font-size: 14px;
        }
        .college-info-plan .college-info-zyz-major {
            width: 93%;
            margin: 15px auto;
            font-size: 14px;
        }
        .college-info-plan .college-info-zyz-major table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            text-align: center;
            margin: 0 auto;
            position: relative;
        }
        .college-info-plan .college-info-zyz-major th{
            background: #fff4ef;
        }
        .college-info-plan .college-info-zyz-major th,td{
            padding: 6px 10px;
            border: 1px solid #ff7637;
        }
        
        .zyzList {
            background: #fff;
            width: 95%;
            margin: 20px auto 0;
            overflow: hidden;
            border-radius: 10px;
        }
        .zyzList table {
            width: 93%;
            font-size: 13px;
            text-align: center;
            border-collapse: collapse;
            margin: 10px auto;
        }
        .zyzList table th {
            padding: 6px 0;
            border: 1px solid #eee;
        }
        .zyzList table td {
            border: 1px solid #eee;
            color: #666;
        }
        
        .majorList {
            background: #fff;
            width: 95%;
            margin: 20px auto 0;
            overflow: hidden;
            border-radius: 10px;
        }
        .majorList table {
            width: 93%;
            font-size: 13px;
            text-align: center;
            border-collapse: collapse;
            margin: 10px auto;
        }
        .majorList table th {
            padding: 6px 0;
            border: 1px solid #eee;
        }
        .majorList table td {
            border: 1px solid #eee;
            color: #666;
        }
        
        .list-title {
            width: 93%;
            margin: 15px auto 0;
            display: block;
            font-size: 15px;
            color: #ff7637;
            font-weight: bold;
        }
    </style>
</head>

<body>
    
    <div id="app">
        <router-view></router-view>
    </div>
    
    <!--引入Vue应用实例-->
    <script type="module" src="js/app.js"></script>
</body>

</html>

    app.js

    app.js 也是比较简单的，构建组件代码，然后将组件创建到路由当中渲染到app节点。

    const { createApp, ref } = Vue;
const { createRouter, createWebHashHistory, useRouter, useRoute } = VueRouter;

// 院校列表
const collegeList = {
    template: `
    <div>
        <div v-for="college in collegeListData.collegeList" :key="college.college_code" class="college-card" @click="showCollegeInfo(college.college_code)">
            <div class="college-logo">
                <img :src="'img/college_logo/' + college.college_logo" />
            </div>
            <div class="college-info">
                <p class="college-name">{{ college.college_name }}</p>
                <p class="college-category">
                    <span class="tag"> {{ college.college_public === 0 ? '公办' : '民办' }} </span>
                    <span class="tag"> {{ college.college_city }} </span>
                    <span class="tag"> {{ college.college_category }} </span>
                </p>
                <p class="college-plan">2023年招生计划{{ college.college_plan_2023 }}人</p>
            </div>
            <div class="next"></div>
        </div>
    </div>`,
    setup() {
        const collegeListData = ref([]);
        const router = useRouter();

        axios.get('./getCollegeList/')
            .then(response => {
                collegeListData.value = response.data;
            })
            .catch(error => {
                console.error('Error fetching JSON data:', error);
            });

        const showCollegeInfo = (college_code) => {
            router.push(`/college/${college_code}`);
        };

        return {
            collegeListData,
            showCollegeInfo,
        };
    },
};

// 院校详情
const collegeDetails = {
    template: `
    <div>
        <div class="college-card">
            <div class="college-logo">
                <img :src="'img/college_logo/' + collegeInfo.college_logo" />
            </div>
            <div class="college-info">
                <p class="college-name">{{ collegeInfo.college_name }}</p>
                <p class="college-category">
                    <span class="tag"> {{ collegeInfo.college_public === 0 ? '公办' : '民办' }} </span>
                    <span class="tag"> {{ collegeInfo.college_city }} </span>
                    <span class="tag"> {{ collegeInfo.college_category }} </span>
                </p>
                <p class="college-plan">2023年招生计划{{ collegeInfo.college_plan_2023 }}人</p>
            </div>
        </div>
        <div class="zyzList">
            <span class="list-title">院校专业组</span>
            <table>
                <tr>
                    <th>专业组</th>
                    <th>计划</th>
                    <th>备注</th>
                </tr>
                <tr v-for="zyz in zyzList" :key="zyz.zyz_code">
                    <td>{{zyz.zyz_code}}</td>
                    <td>{{zyz.zyz_plan}}</td>
                    <td>{{zyz.zyz_bz}}</td>
                </tr>
            </table>
        </div>
        <div class="majorList">
            <span class="list-title">招生专业目录</span>
            <table>
                <tr>
                    <th>专业组</th>
                    <th>专业</th>
                    <th>计划</th>
                    <th>最低分/排位</th>
                </tr>
                <tr v-for="major in majorList" :key="major.major_code">
                    <td>{{major.major_zyzcode}}</td>
                    <td>{{major.major_name}}</td>
                    <td>{{major.major_number}}</td>
                    <td v-if="major.major_lowest_score > 0">{{major.major_lowest_score}}/{{major.major_lowest_rank}}</td>
                    <td v-else> / </td>
                </tr>
            </table>
        </div>
    </div>`,
    setup() {
        const collegeInfo = ref({});
        const majorList = ref({});
        const zyzList = ref({});
        const route = useRoute();
        const id = route.params.id;
        axios.get('./getMajorList/?college_code=' + id)
            .then(response => {
                collegeInfo.value = response.data.collegeInfo[0];
                majorList.value = response.data.majorList;
                zyzList.value = response.data.zyzList;
            })
            .catch(error => {
                console.error('Error fetching college details:', error);
            });

        return {
            collegeInfo,
            majorList,
            zyzList
        };
    },
};

// 创建路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: collegeList },
        { path: '/college/:id', component: collegeDetails },
    ],
});

// 创建Vue应用
const app = createApp({});
app.use(router);

// 挂载应用
app.mount('#app');

    完整代码

    https://likeyun.lanzout.com/iOAnJ1otloaf

    演示

    https://demo.likeyunba.com/san-jia-zheng-shu

    手机网页，建议使用手机访问：

    image.png

    服务器推荐

    几块钱一个月，免备案，送域名和SSL证书。
    https://www.rainyun.com/TANKING_

    作者

    TANKING

    javascriptvue.jsvue3vue-router
    TANKING
    4.8k 声望493 粉丝

    热爱分享，热爱创作，热爱研究。

    « 上一篇
    官方接口！微信域名检测接口！检测域名在微信是否被封被拦截！
    下一篇 »
    JavaScript+PHP实现视频文件分片上传

    引用和评论

    推荐阅读
    头像
    使用角钢diy了一个nas机箱，材料成本21元！旧笔记本电脑发挥余热！搭载飞牛nas（fnOS国产nas系统）

    TANKING阅读 227评论 2

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新