网站建设费属于服务类么自己做网站需要哪些软件
目录
一、项目介绍
二、项目截图
1.项目结构图
2.首页（推荐）
3.诗文
4.名句
5.作者
6.古籍
7.我的
三、源码实现
1.路由配置
2.顶部
四、总结
一、项目介绍
项目在线预览：点击访问
本项目为vue项目，参考古诗文网官方样式为主题来设计元素，简洁美观；
技术要点：vue、 路由router、element-plus、vuex、axios、css、vue组件等；
二、项目截图
1.项目结构图
开发软件是webstorm，当然vscode、hbuilder等都可以，看自己习惯就行。
布局组件分别为顶部+功能内容+底部。
2.首页（推荐）
分为首页+底部，组件思想重复利用实现 ，首页顶部样式特别，因为有背景图，所以一起放在首页，并没有独立出去作为组件，其他页面顶部统一共用顶部组件。
3.诗文
顶部+内容+底部，内容设计为左右两部分。
组件如下图，通过路由实现内容切换，其他页面都同理：
4.名句
各个类目可收起展开。
5.作者
列表/略缩，默认列表，可点击切换。
6.古籍
列表/略缩，默认列表，可点击切换。
7.我的
三、源码实现
项目以组件（顶部、底部）+主布局页面配合路由构思实现，可以通过组件思维重复利用共同的局部页面，简单且美观，也更加利于后期功能页面拓展和维护、修改等。
1.路由配置
import { createRouter, createWebHistory } from 'vue-router'
// import { useUserStore } from '@/stores'const router = createRouter({// history: createWebHistory(import.meta.env.BASE_URL),history: createWebHistory(import.meta.env.VITE_APP_BASE_PATH),routes: [{name: '诗文',path: '/shiwens',component: () => import('@/components/layout/index.vue'),redirect: '/shiwens',children: [{name: '诗文',path: '/shiwens',component: () => import('@/views/shiwens/index.vue')},{name: '名句',path: '/mingjus',component: () => import('@/views/mingjus/index.vue')},{name: '作者',path: '/authors',component: () => import('@/views/authors/index.vue')},{name: '古籍',path: '/guwen',component: () => import('@/views/guwen/index.vue')},{name: '我的',path: '/user',component: () => import('@/views/user/index.vue')}],},{path: '/',name: '首页',component: () =>import( /* webpackChunkName: "page" */ '@/views/home/index.vue')}]
})// 登录访问拦截 => 默认是直接放行的
// 根据返回值决定，是放行还是拦截
// 返回值：
// 1. undefined / true 直接放行
// 2. false 拦回from的地址页面
// 3. 具体路径 或 路径对象 拦截到对应的地址
// '/login' { name: 'login' }
// router.beforeEach((to) => {
// // 如果没有token, 且访问的是非登录页，拦截到登录，其他情况正常放行
// const useStore = useUserStore()
// if (!useStore.token && to.path !== '/login3') return '/login3'
// })export default router
2.顶部
<template><div><div class="maintopbc" style=" height:45px; background:url(https://ziyuan.guwendao.net/siteimg/24jie/%e6%83%8a%e8%9b%b0small.jpg) top center no-repeat; background-size:cover;"><div class="maintop" style="opacity:0.94;"><div class="cont"><div class="left"><a @click="toPath('/')">古诗文网</a></div><div class="right"><div class="son1"><a style="margin-left:1px;" @click="toPath('/')">推荐</a><a @click="toPath('/shiwens')" :class="this.$route.path==='/shiwens'?'menu-active':''">诗文</a><a @click="toPath('/mingjus')" :class="this.$route.path==='/mingjus'?'menu-active':''">名句</a><a @click="toPath('/authors')" :class="this.$route.path==='/authors'?'menu-active':''">作者</a><a @click="toPath('/guwen')" :class="this.$route.path==='/guwen'?'menu-active':''">古籍</a><a @click="toPath('/user')" :class="this.$route.path==='/user'?'menu-active':''">我的</a></div><div class="son2"><div class="search"><form action=""><input id="txtKey" name="value" type="text" value="" maxlength="40" autocomplete="off" style="height:25px; line-height:25px; float:left; padding-left:10px; width:255px; font-size:14px; clear:left; border:0px;"><input type="submit" style="float:right; width:23px; height:23px; clear:right; margin-top:2px; margin-right:4px; background-image:url(../../../public/img/docSearch230511.png); background-repeat:no-repeat; background-size:23px 23px; border:0px;cursor:pointer;" value=""></form></div></div></div></div></div><div class="main3"><div style="width:300px; float:right;"><div id="box"></div></div></div></div></div>
</template><script>export default {data() {return {};},mounted() {},methods: {toPath(path){this.$router.push({path: path});},}};
</script><style scoped>.menu-active{border-bottom:3px solid #5D6146;font-weight:bold;line-height:45px;height:43px;}</style>
其他源码没法一一列举，看第四步骤。
四、总结
项目页面完整，后续可能将不断升级，完善其他页面。
关注作者，及时了解更多好项目！
更多优质项目请看作者主页！
获取源码或如需帮助，可通过博客后面名片+作者即可！