How does vue implement the common part of html?

Development background:

suppose there is a h5 app project, the front and rear ends are completely separated, the front end communicates data through json , and the front end uses vue for data rendering development.

questions / requirements

at present, ui has completed the interface of the entire project, with 30 + pages. In front-end development, every html page inevitably has a common part, which is generally as follows: 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="....">
        <!--  meta -->
        <!-- ...meta... ---->
        <link rel="stylesheet" href="public/css/base.css" />
        <link rel="stylesheet" href="public/css/module.css" />
        <!--  css  -->
        <!-- ...link... ---->
        <script src="plugins/Loading/loading.js"></script>
        <script src="public/lib/jquery.js"></script>
        <!--  js -->
        <!-- ...script... ---->
        <!--  --->
        <title></title>
    </head>
    <body>
    
        <!--  -->
        <!-- ... -->
        
        <script src="public/js/public.js"></script>
        <!--  js -->
        <!-- ...script... ---->
    </body>
</html>

how to separate the public parts, such as < head >. < / head > , which are loaded on each page, by the way of vue , and then load these public parts on each page? The solution is to avoid page-by-page changes if you need to add some code to the common parts of all pages.

above I may not have clearly stated my needs, comparing to the blade templates of some PHP Laravel frameworks:

define a top-level page ( top.blade.php ), define an application-level generic page ( public.blade.php ), and define a specific page based on each controller / method ( index.blade.php ).

inheritance: index.blade.php inherit public.blade.php , public.blade.php inherit top.blade.php .

in this way, if you add new files to the public part, you can easily achieve the need to add the public part to all pages simply by adding new content in public.blade.php or top.blade.php !

in fact, I intend to achieve a function similar to the back-end template engine in the case of a pure front-end! May I ask how to achieve it?

Php vue.js javascript
Mar.13,2021

has a lot of content, and I understand that the problem here is

each page loads these public parts

your code has nothing to do with vue . A common component is fine, and the spa framework should not be too easy to implement.

One of the core of

vue is component development. You abstract these common parts into vue components, or add the common parts you need to ok directly in the entry index.html of the vue-cli project.

I don't know if I got it wrong.

1) if it is a single page application, the head and tail parts only need to be written once in the entry HTML

2) if there are multiple pages and the main content of each page is rendered through vue, there is only a frame structure in html. Then I personally think you can make

use pug, pug to support template inheritance and custom tags. In this way, the headers, footers and the same parts of the 30 + page all use a set of templates, which can be modified quickly

.

Speed.

pug document (formerly jade)

use components to package the public parts into vue pages separately, and then import in the pages that need to be used, and then use the tag to put it in the appropriate location

all use vue, which comes with this function.
learn about the components of vue:
ide/components-registration.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.

depending on the situation, you are a multi-page application made by vue, right? Front-end routing is not used. If you don't use back-end template engines or build tools, you can probably only use pure front-end templates. Try this art-template

like < head >. < / head >, an index.html written directly in vue. If it is the common part of the bottom navigation bar, just look at the vue official website registration component

can be realized through the slot
ide/components-slots.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.

<template>
  <div id="apps">
    <div class="top"></div>
    <div class="leftNav">
      <router-link to="/HelloWorld"></router-link>
      <router-link to="/second"></router-link>
    </div>
    <div class="rightCon">
      <router-view/>
    </div>
  </div>
</template>

the answers upstairs basically fail to see clearly the main things of the building, saying that public components are used. Could you tell me how to use it in the head of index.html? I also encounter the same problem. I need to add tracking codes for various channels in head, or style or meta, has tried to use multiple entrances, but I always feel that it is not elegant enough. Has the landlord found a good way?

Previous: How to handle OPTIONS requests in the background

Next: Video capture by microscope camera

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4bded-593f1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4bded-593f1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?