门户网站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. 点击 创建
   

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

|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-setupimport 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命令安装插件

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

# 打开命令行窗口切换至项目根目录，分别执行：npm install aos --savenpm i --save @srexi/purecounterjs

2. 安装以上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>

2. 在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>

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

<script>import Purecounter from '@srexi/purecounterjs';export default{mounted() {const pure = new Purecounter()}}</script>

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

下一篇

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