“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

First, pre-knowledge

1. How the website works (learn how the various jobs work together)

Product Manager => UI Design => Front end => back end (server + database) => Test => Operation

3. IDE (vscode) editor

Second, the front-end foundation

**HTML (structure) **CSS (style) **JAVASCRIPT (interaction)

Third, the front-end basic supplementary knowledge

  • CSS precompiled (sass, less, Stylus)
  • CSS post processor (PostCss)
  • JS supersets (TypeScript)
  • Responsive layout
  • Compatibility adjustment
  • There are three solutions to solve the problem: (1) CSS modules (2) CSS in JS (3) Tailwind CSS

Four, the front step

  1. Three front-end frameworks (Vue, React, Angular)

Vue3.0 basic syntax Vuex: state management Vue-router: route axios: request Vue-devtools: debugging tool vite: build tool Optional: vue-cli + webpack

  1. Vue – UI library

Element-ui (Ele. me team) Ant-Design (Ant Financial team) Vant (Praise team)

  1. Front-end engineering

Front-end modularization is to divide a large file into small interdependent files, and then assemble and load them in a unified way. Front-end componentization modularization is to split the code or resources at the file level. Componenization is the separation of UI (user interface) at the design level. The front-end standardization, the separation of responsibilities, and the specification of each item in the project. The front-end automation lets all the repetitive work of simple machinery be completed by automatic tools

Four, advanced front end

  1. The HTTP protocol
  2. Network security
  3. Design patterns
  4. The data structure
  5. algorithm
  6. Performance optimization
  7. Mobile Development
  8. Wechat small program
  9. Wechat official account
  10. Micro front-end

Back-end knowledge

  • linux
  • Database (mysql, mongoDB)
  • node.js
  • Node.js framework (KOA, Express, Nest.js)

Six, tools,

  • vscode
  • babel
  • Automation Tools (Grunt, Gulp)
  • Package management tool (NPM, YARN)
  • Build tools (Vite, Vue-CLI + WebPack)
  • Git tools
  • Rich text Editor: Braft Editor
  • Data visualization: ECharts
  • Mock data: mock.js

Learn the road map