More recently, vue has been used in HTML pages, to summarize.

A,

1. Extract the common head and bottom

Take the public header and the bottom out of the public yours, and then, for maintenance, all you need to do is change one file. If not extracted from the common head, bottom; The next 100 pages would be a nightmare. The following schemes were tried:

  • Use jquery’s load() method.

The page didn’t want to introduce jquery, so it abandoned this approach.

  • Use the iframe,

The page does not want to use iframe, so it is abandoned

  • The HTML fragment is requested using AsiOS and inserted into the page

Borrowed the idea of load() from jquery. But the advantages and disadvantages of this approach are not clear at present.

  • Use the Embed tag to extract common headers

Advantages and disadvantages, not very clear at present

  • Extract common headers using the blockQuote tag

Advantages and disadvantages, not very clear at present

2. Extract the common JS logic and mix it with vue mixins.

Put the common mixins into the common JS script (common.js) and hang the common mixins under the window to import the common common.js script in the page. Disadvantages: Mixins are mounted to a window, contaminating global variables. It is recommended to use nomodule for downward compatibility. In browsers that support es6 modules, export and import are recommended.

3. Pass in the page scritpt Multiple JS scripts have been introduced.

It feels like it’s not too ugly to try to introduce other dependent JS scripts into a.js script. But it turns out that this is not very intuitive, so I abandoned it.

Two, compatible with IE9 processing

Third, to be optimized

1. After the public header and bottom are raised, events written in the public header (such as login) are not recognized by VUE.

Four, links,

– How to share headers and tails in different HTML pages?