preface

This is the summary, not so dry.

I’ve spent all my free time in Vue3, TypeScript, and Vite in the last three months (7-9). Today is the last day of September, because of overtime, the plan is just finished.

The three months looked like this:

Small projects

I went through Vue3, TypeScript, and Vite documentation, and then wrote a simple netease cloud.

After learning Vue3, TypeScript, start with “Net Cloud Suppression”.

A large project

Also just internal a new system to do, after comparing the use of Vben Admin this open source project, also summed up some content.

  • Vben Admin in-depth understanding of plug-in, environment variable design
  • Vben Admin in-depth understanding of routing, menu, permission design
  • Vben Admin in-depth understanding of dynamic theme switching design
Look at the source code

It took about two months to read the source code while writing the project. The following is a summary of some of the content, the content of the exported image is also a little fuzzy, all the original files are on GitHub.

  • Making the address

The process tag

I’ve been trying to save the main breakpoints during process debugging so I can easily find them when I look at them later, but I didn’t find the solution. Todo Tree now uses VsCode as expected, highlighting, filtering, searching, and setting breakpoints in the browser if you need to debug.

Why label each major flow? It’s normal to jump back and forth between methods and files in such a large source code base. If this allows you to follow the typing instructions, you can easily go back to the main flow while working out the branch details.

Test cases

If debugging test examples is essential, all are written with simple use cases. Since I did not study the compilation principle in depth, I only understood the compilation process, so I mostly tested it by writing template first, compiling it through template-Explorer, and then writing render according to the compilation result.

Mind mapping

After understanding the implementation of a function, the process will be reorganized, and the important points and call diagram will be presented in the way of mind mapping to enhance the understanding.

The Mini version

Understand the core functions, to achieve a simple version of the implementation, the current implementation of two responsive principle and DIFF algorithm principle.

The project address

  • Making the address