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

摘要

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

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

摘要

我的项目介绍

上代码

残缺代码

演示

作者

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

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

摘要

我的项目介绍

上代码

残缺代码

演示

作者

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复