The basics of Vue's actual combat introduction part 1: Imitation portal website instance from scratch - preparatory work

1. Directory

Part 1: Preparatory work

Part Two: Development Framework Construction

Part III: Implementation of Public Components

Part Four: Realization of the homepage of the website

Part Five: About Our Realization

Part Six: Realization of News and Information

Part Seven: Business Introduction and Joining Us to Realize

Part 8: Implementation of Global Search

Part 9: Mobile interface adaptation

Part 10: Code Refactoring and Publishing the Project

2. Foreword

        In the past, I only used vue in a small amount in the project, and did not use vue as the front-end framework to build the project completely. The main purpose of this article is to familiarize myself with the relevant knowledge of vue through the actual project. Because of seo and compatibility issues (IE browser), vue is not suitable for developing portal websites, but this example is mainly to learn how to use vue in actual combat, so the content of the website is not important. Before this example, you need to be familiar with css, html, js And other basic knowledge.

        For beginners, they may be confused at the beginning of development, and do not know where to start. This article starts with sorting out the development ideas, figuring out the entire example development process and the specific content that needs to be processed at each step.

        It doesn't matter if you are not familiar with the knowledge points of vue. You can find the corresponding solutions in vue through the actual needs in project development, so as to deepen the understanding of relevant knowledge points. The best way to learn is through practice, through the use of Vue in practice to develop corresponding functions, solve problems, and achieve the purpose of learning.

3. Tools

1. Development tools: HBuilder X
2. Reference document: Vue.js
3. web service: nginx

     Please download the development tools by yourself.

4. Content

        For software development, first determine the requirements, and complete the functions according to the requirements. You must not do whatever you want. This example uses Vue3 to implement the anti-portal website from scratch. Refer to the basic functions of the portal website.

        In general practice, artists are required to produce the design drawings first, and then realize the website effect according to the design drawings. This is for learning and use, so there is no art design. You can refer to some existing websites to achieve corresponding effects. It mainly realizes some common functions of portal websites, as follows :

1. Website home page: including modules such as banner diagram, news information, project dynamics, about us, business introduction, case presentation, and team introduction.
2. About us: It includes modules such as company introduction, corporate culture, and team introduction.
3. News information: including news information, project dynamics and other modules.
4. Business introduction: including project introduction, successful cases and other modules.
5. Join us: Showcasing job offers.
6. Global search: search news, project dynamics, etc.

        Use simulated data for display, and build a web server through nginx.

5. Site map

6. Material preparation

        It is mainly picture materials, which can be obtained from Baidu Pictures, Qiankutu, Material China and other websites. It is necessary to prepare logo pictures, banner pictures and corresponding copywriting, etc.

Seven: Source code download

Vue Practical Getting Started Basics: Imitating a Portal Website Example from Scratch-Javascript Documentation Resources-CSDN Download

Next: Start to build the development framework and determine the content to be displayed on each interface, and draw a draft diagram corresponding to the interface.