基于Bootstrap模板创建门户网站vue项目02

门户网站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

页面布局调整

1. 切割 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>
  
  <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>

2. 切割 blog-single.html 页面
   blog-single.html 可以理解为博客详情页，由博客列表点击进入查看详情（BlogDetail）。因此，它复用BlogPage.vue所有组件模块，并且将BlogDetail集成到BlogSection模块中，需要区别开的是BlogSection.vue应该可以根据实际情景切换展示BlogEntry模块还是BlogDetail模块。其中BlogDetail.vue包含的模块是：BlogArticle + BlogAuthor + BlogComment。
   因此BlogSection.vue代码结构如下：

<template>
  
  <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>
  <div class="blog-pagination">
    <ul class="justify-content-center">
      <li>
        <a href="javascript:;">1a>li>
      <li class="active">
        <a href="javascript:;">2a>li>
      <li>
        <a href="javascript:;">3a>li>
    ul>
  div>
  div>
  
  <div class="col-lg-8 entries" v-show="isShowDetail">
    <BlogDetail>BlogDetail>
  div>
  
  
  <BlogSidebar>BlogSidebar>
  div>
  div>
  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

页面布局调整

1. 页面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>
	
        
        <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>

    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>

2. 由于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这个文件才能浏览到我们想看到的页面，特别不方便。因此我们需要引入一个自动路由的配置来解决这个问题。

思路：

1. 写一个脚本/插件自动读取某一目录下的xxxPage.vue文件；
2. 自动生成路由规则；
3. 将路由规则导入到路由并初始化路由；

安装 vue-router

# NPM命令安装路由最新版本
npm install vue-router@next --save

# 安装node支持
npm install @types/node --save

# 为保证插件不会缺少（建议最后执行）
yarn install
# 或
npm install 

添加自动路由配置

1. 在/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

2. 创建并添加/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;

3. 创建并添加/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

4. 创建并添加/src/components/App.vue，代码如下：

<template>
  <router-view>router-view>
template>

<script>
export default {
	name: "",
	props: {},
	data() { return {}; },
	methods: {
		init(){
			return ;
		}
	},
}
script>

5. 创建并添加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>

6. 在/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）

上一篇
下一篇

---

感谢您的阅读！
如有不足之处请多指教。。。