VUE.JS和NODE.JS构建一个简易的前后端分离静态博客系统（四）

这是一个名为 "ClassicHeader" 的 Vue 单文件组件 (SFC)。这个组件包括三个部分：模板（template）、脚本（script）和样式（style）。以下是组件的主要功能：

模板（template）部分：
- 一个带有 "classic" 类名的 header 元素。
- 该 header 元素包含两个子 div，分别具有 "left" 和 "right" 类名。
- 在这两个子 div 中，分别插入名为 "left" 和 "right" 的插槽（slot），以便在使用组件时可以在父组件中传入自定义内容。
脚本（script）部分：
- 定义并导出一个名为 "ClassicHeader" 的 Vue 组件。
样式（style）部分：
- 使用 scoped 属性，这样定义的样式仅应用于当前组件，不会影响其他组件。
- 为 header.classic 元素设置高度、布局、背景颜色和底部边框样式。
- 为 header.classic .left 设置左边距、字体大小、字体权重、颜色和禁止用户选择样式。
- 为 header.classic .right 设置右边距和布局样式。

简言之，ClassicHeader 是一个 Vue 组件，它定义了一个具有两个插槽的页眉，可用于在父组件中传入自定义的左侧和右侧内容。组件的样式主要针对页眉本身以及左右两侧内容的排列和外观。

SubTitle

<template>
  <div class="subTitle">
    <span><slot></slot></span>
  </div>
</template>

<script>
export default {
  name: 'SubTitle',
}
</script>

<style scoped>
  .subTitle {
    /* background-color: yellowgreen; */
    padding-bottom: 10px;
  }

  .subTitle span {
    font-family: 'Courier New', Courier, monospace;
    user-select: none;

    letter-spacing: 1px;
  }
</style>

这是一个名为 "SubTitle" 的 Vue 单文件组件 (SFC)。这个组件包括三个部分：模板（template）、脚本（script）和样式（style）。以下是组件的主要功能：

模板（template）部分：
- 一个带有 "subTitle" 类名的 div 元素。
- 在这个 div 元素中，插入一个默认插槽（slot），以便在使用组件时可以在父组件中传入自定义内容。
脚本（script）部分：
- 定义并导出一个名为 "SubTitle" 的 Vue 组件。
样式（style）部分：
- 使用 scoped 属性，这样定义的样式仅应用于当前组件，不会影响其他组件。
- 为 .subTitle 元素设置内部底部填充。
- 为 .subTitle span 设置字体、禁止用户选择样式和字母间距样式。

简言之，SubTitle 是一个 Vue 组件，它定义了一个带有默认插槽的副标题，可以在父组件中传入自定义内容。组件的样式主要针对副标题本身的外观和间距。

vue-my-cnblog\public\index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="./tinymce/tinymce.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这是一个简单的 HTML 文件，主要用于承载 Vue 项目的根组件。以下是 HTML 文件的主要内容：

文档类型、语言、字符集、浏览器兼容性和视口设置的元信息。
网页的 title 使用 <%= htmlWebpackPlugin.options.title %>，这是一个模板语法，用于在编译时从 webpack 的 HtmlWebpackPlugin 配置中读取 title。
一个指向 favicon.ico 的图标链接。
引入一个外部脚本，这是 TinyMCE 编辑器的主要 JavaScript 文件，这个文件会在浏览器中加载 TinyMCE 编辑器。
noscript 标签内有一个警告消息，当用户的浏览器禁用 JavaScript 时，会显示这个消息，提醒用户需要启用 JavaScript 以获得完整的功能体验。
一个带有 ID "app" 的 div 元素，Vue 项目的根组件将在这里挂载。
注释提到，生成的构建文件将自动注入到此 HTML 文件中。

这个 HTML 文件为 Vue 项目提供了基本的骨架结构，并通过引入 TinyMCE 编辑器脚本使其可在项目中使用。在编译时，构建好的 Vue 应用程序将挂载到带有 ID "app" 的 div 元素中。

<script src="./tinymce/tinymce.min.js"></script> 是在 HTML 文件中引入 TinyMCE 编辑器的方式。TinyMCE 是一个流行的 WYSIWYG（所见即所得）富文本编辑器，它允许用户在浏览器中创建和编辑 HTML 内容。

将 TinyMCE 编辑器脚本添加到 HTML 文件的原因有以下几点：

依赖加载：将 TinyMCE 编辑器作为一个外部依赖加载到项目中，确保在 Vue 应用程序中需要使用它时，TinyMCE 编辑器已经在浏览器中加载并可用。
全局可用：将 TinyMCE 编辑器作为外部脚本引入，使其在整个 Vue 项目中都可以访问和使用。这意味着在项目的任何地方都可以方便地使用 TinyMCE 编辑器创建和编辑富文本内容。
性能优化：将 TinyMCE 编辑器单独引入而不是将其打包到 Vue 项目的主 JS 文件中，有助于提高项目的构建速度和加载性能。这是因为浏览器会单独缓存这个文件，而不是将它与整个 Vue 应用程序一起加载。

总之，在 HTML 文件中引入 TinyMCE 编辑器脚本是为了确保其在整个 Vue 项目中都可用，便于在需要时使用它创建和编辑富文本内容，同时还能优化项目的性能。

ClassicHeader

SubTitle

vue-my-cnblog\public\index.html

公告