Vue单文件组件

397 阅读3分钟

概括

单文件就是把一个页面拆分为多个,多层次的组件,通过多层引用大大缩短vue文件的长度和页面复杂度

.vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js

内容

  • 视图区域 <template></template>
  • 脚本区域 <script></script>
  • 样式区域 <style></style>

image.png

这样的话vue-loader就可以把vue文件里的HTML转为h函数了

image.png

解释

  1. vue-loader

    浏览器本身并不认为.vue文件,所以必须对.vue文件进行加载解析,此时需要vue-loader

    类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等

    需要注意的是vue-loader是基于webpack的

  2. webpack

    webpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理

    实际上,webpack是通过不同的loader将这些资源加载后打包,然后输出打包后文件

    简单来说,webpack就是一个模块加载器,所有资源都可以作为模块来加载,最后打包输出

优缺点

  • 优点:可以把.vue文件翻译成h构建方法
/*h构建方法*/
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
  • 缺点:Html只有一个div#app,SEO不友好

SEO

SEO是搜索引擎优化(Search Engine Optimization)的英文缩写,意指在了解搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中的关键词自然排名,获得更多的流量,从而达成网站销售以及品牌建设的预期目标。

SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面,如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术,来对网页进行相关的优化,使其提高搜索引擎排名,从而提高访问量,最终提升网站的销售能力或宣传能力的技术。增加网站曝光率,提高整站权重,让用户更容易搜索到你的网站,进而带来客观的流量。

SEO不友好

因为单页面的情况下的页面中的很多内容都是根据匹配到的路由动态生成并展示出来的,而且很多页面内容是通过ajax异步获取的,网络抓取工具并不会等待异步请求完成后再行抓取页面内容,对于网络抓取工来说去准确模拟相关的行为获取复合数据是很困难的,它们更擅长对静态资源的抓取和分析。

简单解释: 可以认为搜索引擎就是不停的curl,根据curl的结果猜测页面内容。如果页面全部使用Js创建或使用.vue渲染,那么SEO无法从html中抓取到关键词(因为html原本的body是空的,页面内容是后面渲染上去的)。

如何解决SEO不友好

  • 给curl一点内容:把title、discription、keyword、h1、a写好即可
例:
<head>
    <meta name="keyword" content="jingxi">
    <title>vue单文件组件</title>
    <meta name="discription" content="XXX">
</head>

<body>
    <h1>Vue初体验</h1>
    <a href="www.XXX.com">详情</a>
    /*虽然页面上看不到(被js覆盖),但是curl会抓取到*/
</body>
  • 原则:让curl能得到页面的信息,SEO就能正常工作