上一篇:vue实战入门基础篇一:从零开始仿门户网站实例-前期准备工作
vue实战入门基础篇二:从零开始仿门户网-2022-2-23 21:00:27
一、目录
二、开发环境
本项目使用HBuilder X进行开发,版本为:3.3.11.20220209,使用Vue3进行界面开发。
三、项目结构
3.1创建项目
3.2目录结构
3.3网站内容
网站主要包括:首页、关于我们、新闻资讯、业务介绍、加入我们、全局搜索等界面,每个界面使用一个组件进行定义,页面地图如下:
3.4具体如下
- 首页:网站进入首页
- 关于我们:本页面包含以下三个子界面,主要用于介绍公司信息。
- 公司介绍
- 企业文化
- 团队介绍
- 新闻资讯:菜单主要包含以下子界面,主要用于展示公司的新闻信息。
- 公司新闻
- 项目动态
- 新闻详情页
- 业务介绍:菜单主要包含以下子界面,主要用于展示公司业务及成功案例信息。
- 项目介绍
- 成功案例
- 加入我们:主要展示招聘信息。
- 全局检索:检索新闻资讯、项目动态等信息。
根据网站页面内容建立对应的组件,具体代码目录如下:
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 | 返回顶部组件 |
四、公共组件
网页中公共组件的提取,每个节目的菜单、顶部导航、全局搜索框、底部的导航、返回顶部按钮、友情链接等可提取为公共组件,具体定义如下:
- 菜单:Menu.vue,顶部菜单子组件。
- 顶部导航栏:TopBar.vue,定义顶部logo、集成菜单及全局搜索组件,各个节目统一使用。
- 全局搜索框:Search.vue,定义全局搜索框,集成到顶部导航栏中。
- 底部导航栏:Footer.vue,定义页面底部导航栏,包含友情链接、联系信息、版权等。
- 返回顶部按钮: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')
// 现在,应用已经启动了!