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

爱学习的甲壳虫

已于 2022-02-28 13:31:52 修改

阅读量5.5k

点赞数 5

分类专栏：笔记文章标签： bootstrap 前端 vue.js

于 2022-02-22 11:16:26 首次发布

本文链接：https://blog.csdn.net/u013032479/article/details/123063866

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

门户网站VUE项目（一）
门户网站VUE项目（二）
门户网站VUE项目（三）

文章目录

下载模板

由于我们不是专业的前端工程师，想要开发个个人博客网站，从零开始设计和开发网页的话会十分耗时耗力。如果你有vue的基础的话，有许多好看的前端网页模板可以从网上直接下载使用，有付费的，有免费的。个人推荐以下2个免费且好看的门户网站页面模板官网，挑选喜欢的模板点击下载即可。

BootstrapTaste 模板下载
WordPress 模板下载

我所下载演示的模板是以下这个（点此预览效果）
演示模板

解压后的目录大致如下（仅供参考）

/Presento
  |assets                   //静态资源
    |css
      |-style.css
    |img
    |js
      |-main.js             //初始化脚本
    |vendor                 //JS插件
       |aos
       |bootstrap
       |bootstrap-icons
       |boxicons
       |glightbox
       |isotope-layout
       |php-email-form
       |purecounter
       |remixicon
       |swiper
  |forms                    //表单
    |-contact.php
  |-blog-single.html
  |-blog.html
  |-index.html              //默认首页
  |-inner-page.html
  |-portfolio-details.html

创建vue项目

HBuilder X为例

打开左上角【文件】(或右键左导航菜单空白处)
选择新建
点击 1.项目
选择普通项目
选择 vue3项目(3.x.x)
填入项目名称
点击创建

创建成功后项目目录结构如下：

|node_modules           //本地依赖库
|public                 //公共资源
  |-favicon.ico         //网站标签图标
|src
  |assets               //静态资源
    |-logo.png
  |components           //组件
    |-HelloWorld.vue    //默认首页
  |-App.vue             //初始容器
  |-main.js             //初始化脚本
|-index.html            //初始加载页
|-package.json          //启动打包配置
|-package-lock.json     //本地依赖资源配置（自动生成）
|-vite.config.js        //vue3-ES-Module构建配置

在左菜单栏目项目中，右键package.json文件》外部命令》点击npm run dev 启动项目；启动完成后点击提示信息打开浏览器即可访问默认首页效果（例如，我的默认端口是3000：http://localhost:3000/）。

PS: NPM命令功能如下
npm run build # 打包
npm run dev # 开发模式启动
npm run server # 运行模式启动

引入模板

引入模板首先要做的是把解压模板~/Presento/assets目录里的静态资源文件拷贝放至/src/assets目录
由于我下载的模板是纯静态的传统网页资源（html + js + css），需要进一步切割.html文件的页面模块元素和引入js、css等文件来加工生成vue组件才能应用到项目中。
加工的准则是按代码块功能进行切割，将HTML代码复制粘贴到对应的vue文件内，并引入对应的js脚本和css样式，这里不详细展开，src目录如下。

|src
  |assets               //静态资源
    |css
      |-style.css
    |img
    |js
      |-main.js         //初始化脚本
    |vendor             //JS插件
       |aos
       |bootstrap
       |bootstrap-icons
       |boxicons
       |glightbox
       |isotope-layout
       |php-email-form
       |purecounter
       |remixicon
       |swiper
    |-logo.png
  |components           //组件
    |layout
      |component
        |-About.vue
        |-Clients.vue
        |-Contact.vue
        |-Counts.vue
        |-Portfolio.vue
        |-Pricing.vue
        |-Questions.vue
        |-Services.vue
        |-Tabs.vue
        |-Team.vue
        |-Testimonials.vue
      |-Footer.vue
      |-Header.vue
      |-Hero.vue
      |-Main.vue
    |-HelloWorld.vue    //默认首页
    |-HomePage.vue      //首页Home

页面的嵌套布局调整

以上步骤只是创建基础的vue组件，有些组件是可以复用的，完整的页面组合关系依赖组件之间的嵌套完成；比如index.html的布局设计大概是：Header + Hero + Main + Footer，而Main.vue又包含：Clients + About + Counts + Tabs + Services + Portfolio + Testimonials + Pricing + Questions + Team + Contact。
因此HomePage.vue的代码调整如下：

<script setup>
import { ref } from 'vue'
/* 导入页面依赖的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 Hero from '/src/components/layout/Hero.vue'
import Main from '/src/components/layout/Main.vue'
import Footer from '/src/components/layout/Footer.vue'

</script>

<template>
	
  <Header></Header>
  <Hero></Hero>
  <Main></Main>
  <Footer></Footer>
  
</template>

<style>
/* 引入模板样式依赖 */
/* @import url("/src/assets/img/favicon.png"); */
/* @import url("/src/assets/img/apple-touch-icon.png"); */
@import url("/src/assets/css/googleapis.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");
@import url("/src/assets/css/style.css");
</style>

因此Main.vue的代码调整如下：

<template>
	<div id="main">
		<Clients></Clients>
		<About></About>
		<Counts></Counts>
		<Tabs></Tabs>
		<Services></Services>
		<Portfolio></Portfolio>
		<Testimonials></Testimonials>
		<Pricing></Pricing>
		<Questions></Questions>
		<Team></Team>
		<Contact></Contact>
	</div>
</template>

<script setup>
import Clients from '/src/components/layout/component/Clients.vue'
import About from '/src/components/layout/component/About.vue'
import Counts from '/src/components/layout/component/Counts.vue'

import Tabs from '/src/components/layout/component/Tabs.vue'
import Services from '/src/components/layout/component/Services.vue'
import Portfolio from '/src/components/layout/component/Portfolio.vue'
import Testimonials from '/src/components/layout/component/Testimonials.vue'

import Pricing from '/src/components/layout/component/Pricing.vue'
import Questions from '/src/components/layout/component/Questions.vue'
import Team from '/src/components/layout/component/Team.vue'
import Contact from '/src/components/layout/component/Contact.vue'
</script>

<style>
</style>

修改App.vue的首页引用，代码调整如下：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HomePage from './components/HomePage.vue'
</script>

<template>
  <HomePage msg="Home" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

css样式调整

我们将这些模板资源引入后由于资源引用路径的改变，vue项目启动后访问的页面样式效果十分不理想，我们需要进一步对每个vue组件里的资源引用属性做个调整，将src、href或link里的路径调整为从项目运行根目录/src/出发到达引用资源文件的（伪）绝对路径（如：/src/assets/img/logo.png）。

PS:模版效果中的字体样式是谷歌的字体样式，index.html文件中有通过网络去请求下载，建议将该文件下载保存到本地，存放位置如：/src/assets/css/googleapis.css。

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

引入js插件实现动画效果

npm命令安装插件

有了静态的样式后依然不够完善，我们还缺少动画的效果。aos和purecounterjs分别是实现页面元素动态展示和数字计数滚动的插件；需要先关闭运行的项目，通过npm命令进行插件安装。

# 打开命令行窗口切换至项目根目录，分别执行：

npm install aos --save

npm i --save @srexi/purecounterjs

安装以上2个插件后启动因缺少依赖报错如下，只需要将这些依赖安装即可：

error when starting dev server:
Error: The following dependencies are imported but could not be resolved:

  jquery (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  desandro-matches-selector (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  ev-emitter (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  get-size (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  fizzy-ui-utils (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  outlayer (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  masonry-layout (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  isotope-layout/js/item (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  isotope-layout/js/layout-mode (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  isotope-layout/js/layout-modes/masonry (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  isotope-layout/js/layout-modes/fit-rows (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)
  isotope-layout/js/layout-modes/vertical (imported by D:/Documents/HBuilderProjects/engine-pw/src/assets/vendor/isotope-layout/isotope.pkgd.min.js)

Are they installed?

解决办法：

# 1.通过 npm install __ 命令一个个添加，如：
npm install isotope-layout --save

# 2.如果有安装yarn这个工具的话执行以下命令即可（会自动检查安装缺失的依赖）
yarn install

全局动画插件引用

修改项目默认的/src/main.js文件，并注释模板文件/src/assets/js/main.js中的AOS.init({...})部分

import { createApp } from 'vue'
import App from './App.vue'
import AOS from "aos"
import "../node_modules/aos/dist/aos.css"

const app = createApp(App)
app.mount('#app')
app.use(AOS)

AOS.init({
      duration: 1000,
      easing: 'ease-in-out',
      once: true,
      mirror: false
    })

其他插件的模块局部应用

到此为止，启动服务进行访问首页已有一些动画的效果，根据模板源文件的main.js和index.html上下文注释得知有些模块特效是需要专项声明引用的，因此我们进一步对这些模块进行调整。

在Testimonials.vue中添加Swiper对象声明和初始化，并从/src/assets/js/main.js中删除对应的代码块。

<script>
export default {
    mounted() { // 在页面初始化后执行
        /**
        * Testimonials slider
	    */
        new Swiper('.testimonials-slider', {
            speed: 600,
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false
            },
            slidesPerView: 'auto',
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable: true
            },
            breakpoints: {
                320 : {
                    slidesPerView: 1,
                    spaceBetween: 20
                },
                1200 : {
                    slidesPerView: 3,
                    spaceBetween: 20
                }
            }
        });
    }
}
</script>

在Clients.vue中添加Swiper对象声明和初始化，并从/src/assets/js/main.js中删除对应的代码块。

<script>
export default {
    mounted() {
        /**
        * Clients Slider
        */
        new Swiper('.clients-slider', {
            speed: 400,
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false
            },
            slidesPerView: 'auto',
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable: true
            },
            breakpoints: {
                320 : {
                    slidesPerView: 2,
                    spaceBetween: 40
                },
                480 : {
                    slidesPerView: 3,
                    spaceBetween: 60
                },
                640 : {
                    slidesPerView: 4,
                    spaceBetween: 80
                },
                992 : {
                    slidesPerView: 6,
                    spaceBetween: 120
                }
            }
        });
    }
}
</script>

在Counts.vue文件中引用purecounterjs插件。

<script>
import Purecounter from '@srexi/purecounterjs';

export default{
    mounted() {
        const pure = new Purecounter()
    }
}
</script>

至此模板中的首页index.html部分全部完善，可以重启vue服务比对下效果。

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

爱学习的甲壳虫

关注

5
点赞
踩
43

收藏

觉得还不错? 一键收藏
2
评论
基于Bootstrap模板创建门户网站vue项目01

基于静态的html模板转为vue项目
复制链接

扫一扫

专栏目录