“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Vue3 Warrior Training Manual 2- build source code debugging environment


In the last article, we wrote a learning method to learn Vue3 source code, and in the beginning of this period, we will formally go step by step to solve Vue3 puzzle after puzzle in practice. In this manual, we will build a Vue3 source debugging environment hand in hand. Our IDE for debugging source Code is Visual Studio Code

Clone source code

The first step is to clone the source code in the Vue3 Github repository by executing the following command.

# using SSH
git clone [email protected]:vuejs/vue-next.git

Or use HTTPS
git clone https://github.com/vuejs/vue-next.git

Copy the code

The current version of Vue3 as I write this manual is V3.2.27.

usepnpmInstall dependencies

Since the Vue3 project has abandoned the NPM command in favor of PNPM for package management, we will use it

# in the project folder
pnpm install
Copy the code

To install package dependencies for the project

If you don’t have PNPM installed, you can install it globally. Here I also attach the command to install PNPM (MAC version).

brew install pnpm
Copy the code

Tips: Install may fail for well-known reasons. If your network is not working well, remove itpackage.jsonIn the filedevDependenciesIn thepuppeteerThis package, because this end-to-end test kit, is very large, and we won’t need it as we go along

packagingdevThe environmental code

We are going to debug in the DEV environment, so we can package the code directly by running the following command

pnpm dev
Copy the code

It is important to note that vue3 projects need to support a higher version of Node. If you get a warning like the one below, please upgrade your Node version to >=16.5.0.

If the console is not presentWarningProve that we are well configured and meet Vue3’s operational packaging conditions perfectly.From the figure above, we can also see that the file we pack ispackages/vue/dist/vue.global.js.

Start theserve

Let’s start a static server to run the pakcages/vue/example. These are some of the simplest use cases that will give us a good idea of how vue3 actually works.

pnpm serve
Copy the code

For example, we went to the composition/todomvc.html page.

When we get to the bottom of the page, open our console, Tab to Sources and click, we should see something like this

We then use the shortcut key to ⌘ + p to open the Todo home page, then search todomvc and click to enter the file.

Since we need to learn the source code for Vue3, we find the Vue3 entry in the file, the createApp method, and make a breakpoint there.

Here’s a tip: How do I locate our current file in the sources sidebar? You can right click the mouse button and Reveal in sidebar will bring up a menu bar. Then you can find our files in the sidebar.

The end of the

Well, see here, our task today is completed, we in vue-next this library on the basis of, has built our source code debugging environment, partners can play, see the running process of the code. Next, we will analyze the overall architecture of vuE3 source code, we are not ready to try it ~