ClassicHeader
<template>
<header class="classic">
<div class="left">
<slot name="left"></slot>
</div>
<div class="right">
<slot name="right"></slot>
</div>
</header>
</template>
<script>
export default {
name: 'ClassicHeader',
}
</script>
<style scoped>
header.classic {
height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f9f9fb;
border-bottom: 1px solid #dcdfe6;
}
header.classic .left {
margin-left: 10px;
font-size: 14px;
font-weight: 400;
color: #606266;
user-select: none;
}
header.classic .right {
margin-right: 10px;
display: flex;
}
</style>這是一個名爲 "ClassicHeader" 的 Vue 單文件組件 (SFC)。這個組件包括三個部分：模板（template）、腳本（script）和樣式（style）。以下是組件的主要功能：
-
模板（template）部分：
- 一個帶有 "classic" 類名的
header元素。 - 該
header元素包含兩個子div，分別具有 "left" 和 "right" 類名。 - 在這兩個子
div中，分別插入名爲 "left" 和 "right" 的插槽（slot），以便在使用組件時可以在父組件中傳入自定義內容。
- 一個帶有 "classic" 類名的
-
腳本（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），以便在使用組件時可以在父組件中傳入自定義內容。
- 一個帶有 "subTitle" 類名的
-
腳本（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 項目中都可用，便於在需要時使用它創建和編輯富文本內容，同時還能優化項目的性能。