乐趣区

关于javascript:在普通的html页面用Vue3组合式API写的项目无需Nodejs环境和构建项目

jiezi

摘要

Vue.js 的长处有很多，然而其应用门槛对于只学习过一般的我的项目的同学来说，还是比拟有挑战性的，如果你真的想把 Vue 学的很溜，真的须要一个十分零碎的学习能力使用起来。因为学习 Vue 你不仅仅是学习他的语法、API 和一些开发的标准，你还要学习构建工具的应用、调试、打包等等，有些人连最根本的开发环境都还没能顺利搭建起来。

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

我的项目介绍

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

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

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

我的项目截图：

代码构造：

上代码

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

手机网页，倡议应用手机拜访：

作者

TANKING

退出移动版