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

一、目录

第一篇：前期准备工作

第二篇：开发框架搭建

第三篇：公共组件实现

第四篇：网站首页实现

第五篇：关于我们实现

第六篇：新闻资讯实现

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

第八篇：全局检索实现

第九篇：移动端界面适配

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

二、前言

        以前只在项目中少量使用过vue，未完整全面的使用vue作为前端框架搭建项目，本文的主要目的是通过实际项目熟悉vue的相关知识。因为seo及兼容性问题（ie浏览器），vue并不适合开发门户网站，但本实例主要是为了学习vue在实战中的用法，所以网站内容不重要，本实例之前需熟悉css、html、js等基础知识。

        对于初学者来说，刚开始开发可能一头雾水，不知道从何处开始，本篇开始先整理开发思路，搞清楚整个实例开发的过程及每步具体需要处理的内容。

        不熟悉vue的知识点没有关系，可以通过项目开发中的实际需求去寻找vue中对应的解决办法，从而加深相关知识点的理解。最好的学习方法是通过实践，通过实践中使用vue开发相应功能，解决问题，达到学习的目的。

三、工具

1. 开发工具：HBuilder X
2. 参考文档：Vue.js
3. web服务：nginx

     开发工具等请自行下载。

四、内容

        软件开发先确定需求，根据需求完成功能，千万不可随心所欲，本实例使用vue3从零开始实现防门户网站，参考门户网站基础功能。

        一般实践中需要美工先出设计图，再根据设计图实现网站效果，此处是学习使用，所以无美工设计，可参考一些现有网站，实现对应效果，主要实现门户网站常见的一些功能，如下：

1. 网站首页：其中包括banner图、新闻资讯、项目动态、关于我们、业务介绍、案例展示、团队介绍等模块。
2. 关于我们：其中包括公司介绍、企业文化、团队介绍等模块。
3. 新闻资讯：其中包括新闻资讯、项目动态等模块。
4. 业务介绍：其中包括项目介绍、成功案例等模块。
5. 加入我们：展示招聘信息。
6. 全局搜索：搜索新闻资讯、项目动态等。

        使用模拟数据进行展示，通过nginx搭建web服务器。

五、网站地图

六、素材准备

        主要是图片素材，可以从百度图片、千库图、素材中国等网站获取。需准备logo图、banner图及对应文案等。

七：源码下载

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

下一篇：开始搭建开发框架并确定每个界面要展示的内容，并绘制界面对应草稿图。