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

摘要

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节点下通过 渲染对应路由的内容。

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

app.js

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

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

// 院校列表
const collegeList = {
    template: `
    

        

            

                
            
            

                
{{ college.college_name }}
                

                     {{ college.college_public === 0 ? '公办' : '民办' }} 
                     {{ college.college_city }} 
                     {{ college.college_category }} 
                
                
2023年招生计划{{ college.college_plan_2023 }}人
            
            

        
    
`,
    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: `
    

        

            

                
            
            

                
{{ collegeInfo.college_name }}
                

                     {{ collegeInfo.college_public === 0 ? '公办' : '民办' }} 
                     {{ collegeInfo.college_city }} 
                     {{ collegeInfo.college_category }} 
                
                
2023年招生计划{{ collegeInfo.college_plan_2023 }}人
            
        
        

            院校专业组
            

                

                    
专业组
                    
计划
                    
备注
                
                

                    
{{zyz.zyz_code}}
                    
{{zyz.zyz_plan}}
                    
{{zyz.zyz_bz}}
                
            
        
        

            招生专业目录
            

                

                    
专业组
                    
专业
                    
计划
                    
最低分/排位
                
                

                    
{{major.major_zyzcode}}
                    
{{major.major_name}}
                    
{{major.major_number}}
                    
{{major.major_lowest_score}}/{{major.major_lowest_rank}}
                    
 / 
                
            
        
    
`,
    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