Today I pulled the Topology project off Github and ran it locally to further analyze the source code

When you open the project in the editor, you can see that this is a Vue3.0 based project,The website addressThere are two level 1 directories in the project, public and SRC, as those of you who have used vue know, as well as several other configuration files.Let’s take a look at the directories in turn

1, node – modules

This level 1 directory is configured when using Node and is used after Node is installed to store the packages downloaded and installed using the package management tool. Tools like Webpack, gulp, grunt, etc. In Node.js there is a one-to-one mapping between modules and files, which means that a Node.js file is a module, and every vue file has some corresponding Node configuration files in it

So let’s move on.

2.public

There are three files under the public file, respectivelyJs, ICO icon HTML page

1. Js file under public

There are two JS files inside, after formatting, as shown in the figure: these two JS component libraries, which are customized js by enterprises. If enterprises need to customize their own JS files, they will be placed in this place The first js: 777777.js contains json strings. The code starts calling window.topologyToolidThe custom JS file is introduced in the index.html file in the same directory

Add the left area to the behavior area of home.vue:That is, if we want to add enterprise component image JS, data, etc., we first import js files in the index.html file under the public file, and then add events in the home.vue file.

2. Icon file

A vUE icon

3. The index. The HTML file

In this HTML file. Basically acts as an import, importing a lot of topology old icon components, new icon components, other graphics libraries, etc.This is a repository page.

3, the SRC

Source directory, vUE related code is written here. There are mainly assets (resource directory, Router views app.vue (root component) Main.js (entry js file)

I’m not going to write each one here, but I’m going to write some detailed assets with only one PNG image

1, the components,

There is a helloword.vue component in the components component, which I directly deleted in my normal application development. When I studied the source code, I annotated all the contents in div, and found that I did not change on the surface. Function normal use. These are the main links in the web page;

For guidance and methods on how to configure/customize this project, link address.

2, the router

The Router file here is also simpler.First import vUE; Vue – the router; Home.vue has three components. Register components. Reference components. The route mode is history

3. Views file

Views inside a four filesAbout. Vie doesn’t work. Data. js, as the name suggests, contains a lot of data. I had a quick look at the file, including the ICONS and data contents of the drawing system component in my creation in the left editor. In fact, I think the data.js is better called leftdata.js.

4, home. Vue

Home here. Vue I think is the canvas part of the project This is important: clicking on a drawing triggers an eventThen edit my component.Here we define some parameters: pen Current pen object Key: the property name to the left of the form input value: only valid for drop-down search, currently entered text.

4, the Preview. Vue

I don’t understand this component very well at present. I will come back after I read the official website carefully again

4, APP. Vue

The root component is also simpler, with only a route placeholder. And some style sheets

5, the main js

In the main. Js. Import three components. Vue.config.productionTip = false; To prevent the start of a production message, often used as an instruction. New A new VUE component.All that’s left is some configuration files, nothing to study