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

门户网站VUE项目(一)
门户网站VUE项目(二)
门户网站VUE项目(三)

下载模板

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

  1. BootstrapTaste 模板下载
  2. 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. 打开左上角【文件】(或右键左导航菜单空白处)
  2. 选择新建
  3. 点击 1.项目
  4. 选择 普通项目
  5. 选择 vue3项目(3.x.x)
  6. 填入项目名称
  7. 点击 创建
    HBuilder 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组件里的资源引用属性做个调整,将srchreflink里的路径调整为从项目运行根目录/src/出发到达引用资源文件的(伪)绝对路径(如:/src/assets/img/logo.png)。

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

<!-- Google Fonts -->
<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命令安装插件
  1. 有了静态的样式后依然不够完善,我们还缺少动画的效果。aospurecounterjs分别是实现页面元素动态展示和数字计数滚动的插件;需要先关闭运行的项目,通过npm命令进行插件安装。
# 打开命令行窗口切换至项目根目录,分别执行:

npm install aos --save

npm i --save @srexi/purecounterjs

  1. 安装以上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上下文注释得知有些模块特效是需要专项声明引用的,因此我们进一步对这些模块进行调整。

  1. 在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>
  1. 在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>
  1. 在Counts.vue文件中引用purecounterjs插件。
<script>
import Purecounter from '@srexi/purecounterjs';

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

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

下一篇


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

  • 5
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 3中使用Bootstrap可以通过以下步骤进行: 1. 安装Bootstrap: 在Vue项目的根目录下打开终端,运行以下命令来安装Bootstrap和其依赖: ``` npm install bootstrap@next ``` 2. 导入Bootstrap样式: 在项目的入口文件(通常是`main.js`或`main.ts`)中导入Bootstrap的样式表。可以使用以下方式之一: - 在入口文件的顶部添加以下导入语句: ```javascript import 'bootstrap/dist/css/bootstrap.css'; ``` - 或者在Vue实例创建之前的任意位置导入: ```javascript import 'bootstrap/dist/css/bootstrap.css'; ``` 3. 导入Bootstrap的JavaScript组件(可选): 如果需要使用Bootstrap的JavaScript组件,可以在Vue项目中按需导入。例如,如果你需要使用弹出窗口和模态框组件,可以按如下方式导入: - 在入口文件的顶部添加以下导入语句: ```javascript import 'bootstrap/dist/js/bootstrap.js'; ``` - 或者在需要使用这些组件的组件中导入: ```javascript import 'bootstrap/dist/js/bootstrap.js'; ``` 4. 使用Bootstrap组件: 在Vue组件中,你可以直接使用Bootstrap提供的各种CSS类和组件来构建界面。例如,在模板中使用Bootstrap的按钮组件: ```html <template> <button class="btn btn-primary">Click me</button> </template> ``` 请注意,以上步骤假设你使用的是Vue CLI创建Vue项目。如果你使用其他构建工具或手动配置项目,可能需要根据实际情况进行适当的调整。 另外,如果你希望在Vue中使用Bootstrap的样式和组件更加方便,你也可以考虑使用基于VueBootstrap库,如Vue BootstrapBootstrap-Vue。这些库提供了更好的集成和组件封装,可以更轻松地在Vue项目中使用Bootstrap

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值