摘要
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