vue实战入门基础篇二：从零开始仿门户网站实例-开发框架搭建

上一篇：vue实战入门基础篇一：从零开始仿门户网站实例-前期准备工作

vue实战入门基础篇二：从零开始仿门户网-2022-2-23 21:00:27

一、目录

第一篇：前期准备工作

第二篇：开发框架搭建

第三篇：公共组件实现

第四篇：网站首页实现

第五篇：关于我们实现

第六篇：新闻资讯实现

第七篇：业务介绍及加入我们实现

第八篇：全局检索实现

第九篇：移动端界面适配

第十篇：代码重构并发布项目

二、开发环境

        本项目使用HBuilder X进行开发，版本为：3.3.11.20220209，使用Vue3进行界面开发。        

三、项目结构

3.1创建项目

3.2目录结构

3.3网站内容

        网站主要包括：首页、关于我们、新闻资讯、业务介绍、加入我们、全局搜索等界面，每个界面使用一个组件进行定义，页面地图如下：

3.4具体如下

1. 首页：网站进入首页
2. 关于我们：本页面包含以下三个子界面，主要用于介绍公司信息。
   1. 公司介绍
   2. 企业文化
   3. 团队介绍
3. 新闻资讯：菜单主要包含以下子界面，主要用于展示公司的新闻信息。
   1. 公司新闻
   2. 项目动态
   3. 新闻详情页
4. 业务介绍：菜单主要包含以下子界面，主要用于展示公司业务及成功案例信息。
   1. 项目介绍
   2. 成功案例
5. 加入我们：主要展示招聘信息。
6. 全局检索：检索新闻资讯、项目动态等信息。

根据网站页面内容建立对应的组件，具体代码目录如下：

3.5目录文件说明

序号	文件	说明
1	index.html	网站html文件
2	main.js	界面入口js文件
3	pages	页面组件文件夹
4	components	公共组件文件夹
5	/pages/Index.vue	首页
6	/pages/Job.vue	加入我们界面
7	/pages/Search.vue	搜索界面
8	/pages/about	关于我们界面文件夹
9	/pages/news	新闻资讯界面文件夹
10	/pages/service	业务介绍文件夹
11	/pages/about/About.vue	公司介绍界面
12	/pages/about/Corporate.vue	企业文化界面
13	/pages/about/Team.vue	团队介绍界面
14	/pages/news/News.vue	新闻资讯界面，通过动态加载数据展示新闻信息
15	/pages/news/Detail.vue	新闻资讯详情页
16	/pages/service/Case.vue	案例介绍界面
17	/pages/service/Service.vue	业务介绍界面
18	/components/Menu.vue	菜单组件
19	/components/TopBar.vue	顶部导航栏组件
20	/components/Search.vue	全局搜索组件
21	/components/Footer.vue	底部导航栏组件
22	/components/BackTop.vue	返回顶部组件

四、公共组件

        网页中公共组件的提取，每个节目的菜单、顶部导航、全局搜索框、底部的导航、返回顶部按钮、友情链接等可提取为公共组件，具体定义如下：

1. 菜单：Menu.vue，顶部菜单子组件。
2. 顶部导航栏：TopBar.vue，定义顶部logo、集成菜单及全局搜索组件，各个节目统一使用。
3. 全局搜索框：Search.vue，定义全局搜索框，集成到顶部导航栏中。
4. 底部导航栏：Footer.vue，定义页面底部导航栏，包含友情链接、联系信息、版权等。
5. 返回顶部按钮：BackTop.vue，返回顶部按钮。

五、界面路由

       路由使用Vue Router实现，参考文档：介绍 | Vue Router

       普通静态网站界面，直接使用页面跳转实现，或者使用jquery的load方法切换不同的界面，使用vue后采用vue专门的路由框架来实现对应的功能。

   router-link：类似a标签，实现界面切换。

简单的配置：

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)

app.mount('#app')

// 现在，应用已经启动了！

六：源码下载

vue实战入门基础篇：从零开始仿门户网站实例-Javascript文档类资源-CSDN下载

下一篇：开发实现公共组件。