Nuxt.js 概述 安装 目录结构说明

什么是SEO

SEO：搜索引擎优化（Search Engine Optimization）, 通过各种技术（手段）来确保，我们的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量

SEO解决方案：提前将页面和数据进行整合

• 前端：采用SSR
• 后端：页面静态化 (freemarker 、thymeleaf、velocity)

什么是SSR技术

• 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。

  • 在SSR中，前端分成2部分：前端客户端、前端服务端
  • 前端服务端，用于发送ajax，获得数据
  • 前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）
    

• 如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。

SPA和SSR对比

什么是Nuxt.js

• Nuxt.js 是一个基于 Vue.js 的通用应用框架。
  • Nuxt支持vue的所有功能，此类内容为前端客户端内容。
  • Nuxt特有的内容，都是前端服务端内容。
• 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
• Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

入门案例

create-nuxt-app 介绍

• Nuxt.js 提供了脚手架工具 create-nuxt-app
• create-nuxt-app 需要使用 npx
• npx 命令为 NPM版本5.2.0默认安装组件
  
  安装

npx create-nuxt-app <project-name>

npx create-nuxt-app demo_nuxt02

启动

npm run dev

访问
http://localhost:3000

目录结构


别名
assets 资源的引用：~ 或 @

// HTML 标签
<img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="~/assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="@/assets/13.jpg" style="height:100px;width:100px;" alt="">

// CSS
background-image: url(~assets/13.jpg);
background-image: url(~/assets/13.jpg);
background-image: url(@/assets/13.jpg);

static 目录资源的引用：/ 直接引用

//html标签
<img src="/12.jpg" style="height:100px;width:100px;" alt="">

//css
background-image: url(/12.jpg);

实例

<template>
  <div>
    <!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
    <img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">

    <!-- 引用 static 目录下的图片 -->
    <img src="/12.jpg" style="height:100px;width:100px;" alt="">

    <!-- css -->
    <div class="img1"></div>
    <div class="img2"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  .img1 {
    height: 100px;
    width: 100px;
    background-image: url(~assets/13.jpg);
    background-size: 100px 100px;
    display: inline-block;
  }
  .img2 {
    height: 100px;
    width: 100px;
    background-image: url(/12.jpg);
    background-size: 100px 100px;
    display: inline-block;
  }
</style>