summary

A single file is the splitting of a page into multiple, multi-level components, which greatly reduces the length and page complexity of a VUE file through multiple references

.vue file, called single file component, is a customized file format of vue. js. A. Vue file is a single component, which encapsulates the component-related code: HTML, CSS, js in the file

content

  • View area<template></template>
  • The script area<script></script>
  • Style area<style></style>

This way vue-loader can convert HTML from vue files into h functions

explain

  1. vue-loader

    The browser does not recognize the. Vue file, so it must load and parse the. Vue file. In this case, vue-loader is required

    There are many similar loaders, such as htMl-loader, CSS-loader, style-loader, babel-loader and so on

    Note that vue-loader is based on WebPack

  2. webpack

    Webpack is a front-end resource template loader and packaging tool that can use and process various resources as modules

    In fact, WebPack loads and packages these resources through different loaders, and then outputs the packaged files

    In simple terms, WebPack is a module loader where all resources can be loaded as modules and the output packaged

The advantages and disadvantages

  • Advantages: can translate.vue files into h build methods
New Vue({render (h) {return h('div', this.hi)}})Copy the code
  • Cons: Html has only one div#app, SEO is not friendly

SEO

SEO is the Abbreviation of Search Engine Optimization. It refers to the internal and external adjustment and Optimization of a website based on the understanding of the natural ranking mechanism of Search engines, so as to improve the natural ranking of keywords in Search engines and get more traffic. So as to achieve the website sales and brand building target.

SEO’s main job is through understanding of how search engines crawl the Internet page, how to index and how to determine its for a particular keyword search results ranking technology, such as the optimization of related web pages for, make its improve search engine rankings, thereby improving traffic, eventually improve website sales ability or technical ability. Increase site exposure, improve the weight of the whole station, so that users can search your site more easily, and then bring objective traffic.

SEO is not friendly

Because of the cases of the single page page of a lot of content is according to the matching to the routing dynamically generated and displayed, and a lot of page content is through ajax asynchronous access, web crawler will not wait for an asynchronous request again after the completion of the scraping of the page content, for web scraping work to accurately simulate the behavior of the related to obtain composite data is difficult, They are better at fetching and analyzing static resources.

Simple explanation: Think of a search engine as a constant curl, guessing the content of a page based on the curl’s results. If the page is completely created using Js or rendered using.vue, SEO cannot capture keywords from the HTML (because the original body of the HTML is empty and the page content is rendered later).

How to solve SEO unfriendly

  • Curl curl curl curl curl curl curl curl curl curl curl curl
Ex. : <head> <meta name="keyword" content="jingxi"> <title> <meta name="discription" content="XXX"> </head> </h1> <a href="www.XXX.com">Copy the code
  • Rule of thumb: Curl gets the information on your page, and SEO will work