门户网站VUE项目（一）
门户网站VUE项目（二）
门户网站VUE项目（三）
插件安装与优化
如果你成功完成了上一篇文章的操作与实践，我们的首页页面已有了初步的雏形，但aos.js 与 purecounter.js 仅仅只是解决了基本的插件冲突的问题，以及实现了页面元素的滚动和数字计数动画的效果。里面还有些插件是非引用冲突且需要进一步调整的插件，并且我们还要进一步完善Blog模块、Portfolio模块和请求路由配置。
Blog模块
目录结构：
页面组件Header.vue、Breadcrumbs.vue、Footer.vue是可以公共复用的，需要创建的是非公共的部分:BlogSection.vue、BlogArticle.vue、BlogAuthor.vue、BlogComment.vue、BlogDetail.vue、BlogEntry.vue、BlogSideBar.vue、BlogPage.vue。
其目录结构如下：
|src
|components //组件
|blog
|component
|-BlogArticle.vue
|-BlogAuthor.vue
|-BlogComment.vue
|-BlogDetail.vue
|-BlogEntry.vue
|-BlogSideBar.vue
|-BlogSection.vue
|-BlogPage.vue
页面布局调整
- 切割 blog.html 页面
blog.html 其实是个博客摘要信息列表页，未来你可以优先展示若干篇博客摘要记录实现列表分页。其主页面是BlogPage.vue，主页面包含模块是：Header + Breadcrumbs + BlogSection + Footer，然后BlogSection.vue包含：BlogEntry + BlogSideBar。
因此BlogPage.vue代码结构如下：
<script setup>
/* 导入页面依赖的js插件 Vendor JS Files */
// import '/src/assets/vendor/purecounter/purecounter.js' //npm安装方式引入
// import '/src/assets/vendor/aos/aos.js' //npm安装方式引入
import '/src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js'
import '/src/assets/vendor/glightbox/js/glightbox.min.js'
import '/src/assets/vendor/isotope-layout/isotope.pkgd.min.js'
import '/src/assets/vendor/swiper/swiper-bundle.min.js'
import '/src/assets/vendor/php-email-form/validate.js'
/* Main JS File */
import '/src/assets/js/main.js'
/* 页面布局组件 */
import Header from '/src/components/layout/Header.vue'
import Footer from '/src/components/layout/Footer.vue'
import Breadcrumbs from '/src/components/layout/component/Breadcrumbs.vue'
import BlogSection from '/src/components/blog/BlogSection.vue'
</script>
<template>
<Header></Header>
<main id="main">
<Breadcrumbs></Breadcrumbs>
<BlogSection></BlogSection>
</main><!-- End #main -->
<Footer></Footer>
</template>
<style>
/* 引入模板样式依赖 */
@import url("/src/assets/css/googleapis_fonts.css");
/* @import url("/src/assets/vendor/aos/aos.css"); #通过npm安装方式引入 */
@import url("/src/assets/vendor/bootstrap/css/bootstrap.min.css");
@import url("/src/assets/vendor/bootstrap-icons/bootstrap-icons.css");
@import url("/src/assets/vendor/boxicons/css/boxicons.min.css");
@import url("/src/assets/vendor/glightbox/css/glightbox.min.css");
@import url("/src/assets/vendor/remixicon/remixicon.css");
@import url("/src/assets/vendor/swiper/swiper-bundle.min.css");
/* Main CSS File */
@import url("/src/assets/css/style.css");
#main {
text-align: left;
}
</style>
- 切割 blog-single.html 页面
blog-single.html 可以理解为博客详情页，由博客列表点击进入查看详情（BlogDetail）。因此，它复用BlogPage.vue所有组件模块，并且将BlogDetail集成到BlogSection模块中，需要区别开的是BlogSection.vue应该可以根据实际情景切换展示BlogEntry模块还是BlogDetail模块。其中BlogDetail.vue包含的模块是：BlogArticle + BlogAuthor + BlogComment。
因此BlogSection.vue代码结构如下：
<template>
<!--=======B log Section======= -->
<section id="blog" class="blog">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-8 entries" v-show="!isShowDetail">
<!-- BlogEntry -->
<BlogEntry></BlogEntry>
<div class="blog-pagination">
<ul class="justify-content-center">
<li>
<a href="javascript:;">1</a></li>
<li class="active">
<a href="javascript:;">2</a></li>
<li>
<a href="javascript:;">3</a></li>
</ul>
</div>
</div>
<!-- End blog entries list -->
<div class="col-lg-8 entries" v-show="isShowDetail">
<BlogDetail></BlogDetail>
</div>
<!-- End blog entrie detail -->
<!-- BlogSidebar -->
<BlogSidebar></BlogSidebar>
</div>
</div>
</section>
<!-- End Blog Section --></template>
<script>
import BlogEntry from '/src/components/blog/component/BlogEntry.vue';
import BlogSidebar from '/src/components/blog/component/BlogSidebar.vue';
import BlogDetail from '/src/components/blog/component/BlogDetail.vue';
export default {
components:
{
BlogEntry,
BlogSidebar,
BlogDetail,
},
name: "BlogSection",
data() {
return {
isShowDetail: false,
}
},
}
</script>
<style>
</style>
PortfolioDetail模块
目录结构：
Portfolio 是主页HomePage的其中一个部分，展示的是一些图片。由主页作为入口打开详情页，所以我们需要实现的是PortfolioDetail模块。PortfolioDetail.vue复用页面公共组件Header.vue、Breadcrumbs.vue、Footer.vue，我们创建非公共的部分:PortfolioInfo.vue、PortfolioPictureSlider.vue。让PortfolioDetail去集成模块：Header + Breadcrumbs + PortfolioPictureSlider + PortfolioInfo + Footer。
目录结构如下：
|src
|components //组件
|portfolio
|-PortfolioInfo.vue
|-PortfolioPictureSlider.vue
|-PortfolioDetail.vue
页面布局调整
- 页面
PortfolioDetail.vue代码如下:
<script setup>
/* 导入页面依赖的js插件 Vendor JS Files */
// import '/src/assets/vendor/purecounter/purecounter.js' //npm安装方式引入
// import '/src/assets/vendor/aos/aos.js' //npm安装方式引入
import '/src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js'
import '/src/assets/vendor/glightbox/js/glightbox.min.js'
import '/src/assets/vendor/isotope-layout/isotope.pkgd.min.js'
import '/src/assets/vendor/swiper/swiper-bundle.min.js'
import '/src/assets/vendor/php-email-form/validate.js'
/* Main JS File */
import '/src/assets/js/main.js'
/* 页面布局组件 */
import Header from '/src/components/layout/Header.vue'
import Footer from '/src/components/layout/Footer.vue'
import Breadcrumbs from '/src/components/layout/component/Breadcrumbs.vue'
import PortfolioInfo from '/src/components/portfolio/PortfolioInfo.vue'
import PortfolioPictureSlider from '/src/components/portfolio/PortfolioPictureSlider.vue'
</script>
<template>
<Header></Header>
<main id="main">
<Breadcrumbs></Breadcrumbs>
<!-- ======= Portfolio Details Section ======= -->
<section id="portfolio-details" class="portfolio-details">
<div class="container">
<div class="row gy-4">
<div class="col-lg-8">
<PortfolioPictureSlider></PortfolioPictureSlider>
</div>
<div class="col-lg-4">
<PortfolioInfo></PortfolioInfo>
</div>
</div>
</div>
</section><!-- End Portfolio Details Section -->
</main><!-- End #main -->
<Footer></Footer>
</template>
<style>
/* 引入模板样式依赖 */
@import url("/src/assets/css/googleapis_fonts.css");
/* @import url("/src/assets/vendor/aos/aos.css"); #通过npm安装方式引入 */
@import url("/src/assets/vendor/bootstrap/css/bootstrap.min.css");
@import url("/src/assets/vendor/bootstrap-icons/bootstrap-icons.css");
@import url("/src/assets/vendor/boxicons/css/boxicons.min.css");
@import url("/src/assets/vendor/glightbox/css/glightbox.min.css");
@import url("/src/assets/vendor/remixicon/remixicon.css");
@import url("/src/assets/vendor/swiper/swiper-bundle.min.css");
/* Main CSS File */
@import url("/src/assets/css/style.css");
#main {
text-align: left;
}
</style>
- 由于
PortfolioPictureSlider模块主要内容是图片幻灯片，因此同样地需要添加Swiper对象初始化代码在该页面内（同时删除/src/assets/js/main.js中对应的代码块）：
<script>
export default{
mounted() {
/**
* Portfolio details slider
*/
new Swiper('.portfolio-details-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
}
}
</script>
解决路由问题
到目前为止我们拥有了足够多的页面和组件，每次调试都要修改/src/App.vue这个文件才能浏览到我们想看到的页面，特别不方便。因此我们需要引入一个自动路由的配置来解决这个问题。
思路：
- 写一个脚本/插件自动读取某一目录下的
xxxPage.vue文件； - 自动生成路由规则；
- 将路由规则导入到路由并初始化路由；
安装 vue-router
# NPM命令安装路由最新版本
npm install vue-router@next --save
# 安装node支持
npm install @types/node --save
# 为保证插件不会缺少（建议最后执行）
yarn install
# 或
npm install
添加自动路由配置
- 在
/src/下创建目录：views、router；并且将HomePage.vue、BlogPage.vue、PortfolioDetail.vue移动至/src/views目录下。
目录结构如下：
|src
|components //组件
|-App.vue
|router //路由配置
|-auto-route-views.js //自动路由配置
|-router.js //创建并导入路由
|views //自动路由目录
|common //公共组件页
|-404.vue //页面不存在默认页
|-BlogPage.vue
|-HomePage.vue //首页
|-PortfolioDetail.vue
- 创建并添加
/src/router/auto-route-views.js，代码如下：
//auto-route-views.js
//获取views目录下的所有.vue文件
const files = import.meta.globEager('/src/views/*.vue');
const commonFiles = import.meta.globEager('/src/views/*/*.vue'); //扫描二级目录
let pages = {};
for(let key in files){
pages[key.replace(/(\.\/|\.vue)/g, '')] = files[key].default;
}
for(let key in commonFiles){
pages[key.replace(/(\.\/|\.vue)/g, '')] = commonFiles[key].default;
}
//生成路由规则
let generator = [];
Object.keys(pages).forEach(item => {
let path = item;
let name = item.replace(/(\w)+\/|\//g, '');
generator.push({
path: `${path}`,
name: `${name}`,
component: pages[item]
});
generator.push({
path: `/${name}`,
name: `r_${name}`,
redirect: `${path}`
});
});
//合并公共路由以及重定向规则
const routes = [{
path: '/',
name: 'Home',
redirect: '/src/views/HomePage',
},
...generator,
{
path: '/:pathMatch(.*)',
redirect: '/404'
}
];
export default routes;
- 创建并添加
/src/router/router.js，代码如下：
//router.js
import {createRouter, createWebHistory} from 'vue-router'
//导入生成好的规则
import routers from './auto_route_views.js'
const router = createRouter({
history: createWebHistory(),
routes: routers
});
export default router
- 创建并添加
/src/components/App.vue，代码如下：
<template>
<router-view></router-view>
</template>
<script>
export default {
name: "",
props: {},
data() { return {}; },
methods: {
init(){
return ;
}
},
}
</script>
- 创建并添加404默认页:
/src/views/common/404.vue，代码如下：
<template>
<Header></Header>
<Breadcrumbs tag="~" msg="404"></Breadcrumbs>
<div style="margin-top: 12%;text-align: center;">
<p> <h1>404<span style="font-size: 5.125rem;">🛸</span></h1> </p>
<p> <h3>页面飞走了！！！</h3> </p>
</div>
</template>
<script setup>
/* 页面布局组件 */
import Header from '/src/components/layout/Header.vue'
import Breadcrumbs from '/src/components/layout/component/Breadcrumbs.vue'
</script>
<style>
</style>
- 在
/src/main.js文件中引入路由配置，代码如下：
import { createApp } from 'vue'
import App from '/src/components/App.vue'
import routers from '/src/router/router.js'
import AOS from "aos"
import "/node_modules/aos/dist/aos.css"
const Vue = createApp(App)
Vue.use(routers)
Vue.mount('#app')
Vue.use(AOS)
AOS.init({
duration: 1000,
easing: 'ease-in-out',
once: true,
mirror: false
})
至此，浏览器中URL仅输入/[页面名称]，通过自动路由配置就可以便捷地访问到views下的页面了。（如：http://localhost:3000/BlogPage）
感谢您的阅读！
如有不足之处请多指教。。。
2273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
