门户网站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。
<!-- 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命令安装插件
- 有了静态的样式后依然不够完善,我们还缺少动画的效果。
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服务比对下效果。
感谢您的阅读!
如有不足之处请多指教。。。