Use Vue in native HTML and run directly in the browser Vue file, using leaflet in Vue



Using vue3 in HTML does not depend on nodejs, webpack, or scaffolding

Demo source code


  1. Several simple components are written, using element plus and vuex
  2. Using leaflet to realize electronic map in vue3 component


  1. Native HTML development does not rely on nodejs, webpack, or scaffolding
  2. Support to run directly in the browser Component file with Vue extension
  3. Style support scoped
  4. Integrating leaflet to realize electronic map
  5. Vue and jqeury are mixed to facilitate the introduction of old code with less modification

Code branch

1. Master branch

The main branch, which loads Vue files asynchronously

2. Sync branch

This branch loads Vue files synchronously. There are performance problems when there are many files


  1. The component style supports scoped, but the implementation principle is different from that of Vue. The defect is that the style in the parent component may be applied to the label with the same class in the child component,
    When this happens, set the value of the CSS attribute in the class for the affected sub component

  2. support. Vue extension file, so that the prepared Vue template code has syntax check in vscode

  3. Google browser can be opened. Firefox has not been tested and does not support IE browser

  4. The electronic map code is from copied code itself has nothing to do with Vue. An additional component mappage is written to introduce the function of electronic map,
    In this way, there is no need to write the map related code directly in the Vue component

About controlbuttons JS and switchmapcontrol js

These two electronic map related components do not use Vue Define component, but use Vue The method of createapp is defined to test different implementation methods;
Controlbuttons are implemented directly using jQuery and mixed with Vue;


  1. In order to solve the problem of Vue file loading performance, asynchronous functions are used. Due to the infectivity of async await, when defining components with definecomponent, the template must be obtained asynchronously,
    As a result, the defined components cannot be imported through import. Asynchronous functions must be defined to create components. When defining the parent component with definecomponent, the child components must be obtained asynchronously

  2. The use of async await makes the code simple and clear, and gracefully realizes the parallel request of Vue file

be careful

  1. Yes, iclient leaflet JS should be placed in proj4leaflet JS, otherwise iclient – leaflet JS will override proj4leaflet Scale method of in JS,
    So that Baidu map can not correctly load tiles; When using leaflet to load Baidu map, iclient leaflet is referenced JS and the image source is not provided by hypergraph, this problem may be caused

Code structure

Demo renderings