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

要害的代码都在 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