Kenhuang Academy
  • English

      • Vue.js learning resources

      Official resources

      document

      Official tools

      Video tutorial

      Chinese video

      English video

      Books

      Chinese books

      • "Vue.js Design and Implementation" - Huo Chunyang (Vue core team member)
      • "In-depth explanation of Vue.js" - Liu Bowen
      • "Vue.js 3.0 Core Source Code Analysis" - Huang Yi
      • "Vue.js Practical Combat" - Liang Hao

      English books

      • "Vue.js 3 By Example" - John Au-Yeung
      • "Vue.js: Up and Running" - Callum Macrae
      • "Testing Vue.js Applications" - Edd Yerburgh
      • "Fullstack Vue" - Hassan Djirdeh

      Online course platform

      Chinese platform

      English platform

      Blogs and Articles

      Official Blog

      Technical Community

      Personal blog

      Open source projects

      Learning Project

      Component library source code

      Tool library source code

      • VueUse - Learn combined functions
      • Pinia - Learning status management
      • Vue Router - Learn routing implementation

      Communities and Forums

      Chinese community

      International Community

      GitHub Resources

      Awesome List

      Learning Warehouse

      Junior Project

      1. To-Do App - Learn the Basics of CRUD
      2. Weather Application - Learn API calls
      3. Calculator - Learning event handling
      4. Blog System - Learn routing and status management

      Intermediate Project

      1. E-commerce website - complete shopping process
      2. Social Media Apps - User interaction and real-time updates
      3. Project Management Tool - Complex status management
      4. Online Chat Application - WebSocket real-time communication

      Advanced Project

      1. Backend management system - permission management, data visualization
      2. Online Editor - Complex interaction logic
      3. Video Platform - Media processing and playback
      4. Real-time collaboration tool - multi-person collaboration function

      Learning route

      Phase 1: Basic Introduction (1-2 weeks)

      • ✅ HTML, CSS, JavaScript basics
      • ✅ Vue basic syntax
      • ✅ Template syntax and instructions
      • ✅ Component Basics
      • ✅ Complete simple projects (to-do list)

      Phase 2: Advanced Learning (2-3 weeks)

      • ✅ Component communication
      • ✅ Life cycle
      • ✅Combined API
      • ✅ Vue Router
      • ✅ Pinia status management
      • ✅ Complete medium-sized projects (blog system)

      The third stage: in-depth practice (3-4 weeks)

      • ✅ Use component library
      • ✅ Project engineering
      • ✅Performance optimization
      • ✅ Test
      • ✅ Complete complex projects (e-commerce website)

      Stage 4: Advanced Topics (Continuous Learning)

      • ✅ SSR and Nuxt.js
      • ✅ Micro frontend
      • ✅ Source code reading
      • ✅ Contribute to open source
      • ✅ Complete enterprise-level projects

      Study suggestions

      1. Hands-on practice

      • Don’t just watch tutorials, write code yourself
      • Do a small project every time you learn a knowledge point
      • When encountering a problem, think about it yourself first, then check the information

      2. Read the documentation

      -Official documents are the best learning resources

      • Check the documentation first if you encounter problems -Reread the document regularly to gain new understanding

      3. Participate in the community

      • Ask and answer questions in the community
      • Share your learning experience
      • Participate in open source projects

      4. Continuous learning

      • Follow Vue official news
      • Learn new features and best practices
      • Understand front-end development trends

      5. Build the project

      • Start with simple projects
      • Gradually increase complexity
      • Complete the complete project cycle

      FAQ

      Q: Vue 2 or Vue 3?

      A: It is recommended to use Vue 3 for new projects, which has better performance and TypeScript support.

      Q: Do I need to learn TypeScript?

      A: It is recommended to learn. Vue 3 has good support for TypeScript and is a must for large projects.

      Q: Do you want to learn Nuxt.js?

      A: If you need SSR or static site generation, Nuxt.js is the best choice.

      Q: How to improve learning efficiency?

      A: Write more code, do more projects, read more source code, and participate more in the community.

      Q: What else should I learn after learning Vue?

      A:

      • Build tools (Vite, Webpack)
      • Testing (Vitest, Cypress)
      • Performance optimization
      • Engineering practice
      • Other frameworks (React, Angular)

      Career Development

      Junior front-end engineer

      • Master the basics of Vue
      • Able to complete simple pages independently
      • Understand basic engineering

      Intermediate front-end engineer

      • Proficient in using Vue family bucket
      • Able to design component architecture
      • Master performance optimization
      • Have complete project experience

      Senior front-end engineer

      • In-depth understanding of Vue principles
      • Able to solve complex technical problems
      • Have architectural design capabilities
      • Able to mentor team members

      Front-end architect

      • Proficient in front-end technology stack
      • Experience in large-scale projects
      • Able to formulate technical solutions
      • Have technical influence

      Summarize

      Learning Vue.js is a step-by-step process:

      1. Lay the foundation - HTML, CSS, JavaScript
      2. System Learning - Follow the official documentation
      3. Hands-On - Complete various projects
      4. In-depth understanding - Read the source code and principles
      5. Continuous Improvement - Focus on new technologies and best practices

      Remember: The best way to learn is to write code! **

      I wish you happy learning and become an excellent Vue developer! 🎉