chore: backup

chengpeiquan · Feb 20, 2024 · 4c73045 · 4c73045
1 parent a34796c
commit 4c73045
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 0 deletions.
diff --git a/.vitepress/theme/components/ReadingTips.md b/.vitepress/theme/components/ReadingTips.md
@@ -0,0 +1,15 @@
+## 温馨提示
+
+这是笔者写于 2024.02.20 的补充提示，为读者解答为何前面的章节都未提及 script-setup 组件语法的信息。
+
+笔者在执笔之初，考虑到降低初学过程中的各种心智负担，以及当时处于 script-setup 组件语法尚未完全稳定的背景下，所以在最后一章 [高效开发](/efficient) 之前的章节，都只提供了组件的标准写法的讲解。
+
+除非遇到框架进行了 Breaking Change （例如从 Vue 2 升级到了 Vue 3 这种大版本更新），否则标准写法是始终有效的，在笔者多年的学习经历和实际收获里，也是比较相信一点：不论学习什么语言或者框架，只要基础打的好，未来总是可以轻松地举一反三去解决遇到的各类问题。
+
+因此如果读者通过各类脚手架创建的 Vue 3 项目，在组件看到 `<script setup>` 这种风格的组件，以及诸如 `defineXxx` 风格的 API ，这是 `.vue` 组件所支持的一种语法糖，可以随时在 [高效开发](/efficient) 一章了解相关的 API 用法。
+
+另外从 Vue 3.4 版本之后所新增的 API 未在本书的介绍范围内，请读者在阅读的过程中也可以查阅官方的 API 一起学习，不论是本书还是其他计算机书籍，官方文档永远是最好的查询手册。
+
+:::tip
+语法糖（英语：Syntactic sugar）是由英国计算机科学家彼得·兰丁发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。
+:::
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import defaultTheme from 'vitepress/theme'
 import { createVitePressBaiduAnalytics } from '@web-analytics/vue'
 import GitalkComment from './components/GitalkComment.vue'
 import ImgWrap from './components/ImgWrap.vue'
+import ReadingTips from './components/ReadingTips.md'
 import { setSymbolStyle, replaceSymbol } from './plugins/symbol'
 import { isInvalidRoute, redirect } from './plugins/redirect'
 import './styles/custom.css'
@@ -16,6 +17,7 @@ const theme: Theme = {
   enhanceApp({ app, router }) {
     app.component('GitalkComment', GitalkComment)
     app.component('ImgWrap', ImgWrap)
+    app.component('ReadingTips', ReadingTips)
 
     if (inBrowser) {
       if (isInvalidRoute()) {

diff --git a/docs/changelog.md b/docs/changelog.md
@@ -8,6 +8,10 @@ outline: 'deep'
 
 考虑到后面还会不定期更新内容，所以翻了一下之前跟朋友的微信聊天记录整理了前期的更新记录，之后当文档有再次更新的时候也会继续整理更新记录，方便读者们查阅。
 
+## 2024-02-20
+
+在 [单组件的编写](component.md) 、 [路由的使用](router.md) 、 [插件的开发和使用](plugin.md) 、 [组件之间的通信](communication.md) 、 [全局状态管理](pinia.md) 这几张内容的最前面，补充了一个阅读提示，解答近期收到的读者反馈的一些疑惑。
+
 ## 2024-01-16
 
 插件部分增加一个 [path/to 的典故](./plugin.md#对-npm-包进行本地调试) 扩展阅读。

diff --git a/docs/communication.md b/docs/communication.md
@@ -21,6 +21,8 @@ outline: 'deep'
 | 兄弟组件通信 | [点击查看](#兄弟组件通信) |
 | 全局组件通信 | [点击查看](#全局组件通信) |
 
+<ReadingTips />
+
 ## 父子组件通信
 
 父子组件通信是指，B 组件引入到 A 组件里渲染，此时 A 是 B 的父级；B 组件的一些数据需要从 A 组件拿，B 组件有时也要告知 A 组件一些数据变化情况。

diff --git a/docs/component.md b/docs/component.md
@@ -12,6 +12,8 @@ outline: 'deep'
 对 TypeScript 不太熟悉的开发者，建议先阅读 [快速上手 TypeScript](typescript.md) 一章，有了一定的语言基础之后，再一边写代码一边加深印象。
 :::
 
+<ReadingTips />
+
 ## 全新的 setup 函数 ~new
 
 在开始编写 Vue 组件之前，需要了解两个全新的前置知识点：

diff --git a/docs/pinia.md b/docs/pinia.md
@@ -12,6 +12,8 @@ outline: 'deep'
 本章内的大部分内容都会和 Vuex 作对比，方便从 Vuex 项目向 Pinia 的迁移。
 :::
 
+<ReadingTips />
+
 ## 关于 Pinia ~new
 
 由于 Vuex 4.x 版本只是个过渡版，Vuex 4 对 TypeScript 和 Composition API 都不是很友好，虽然官方团队在 GitHub 已有讨论 [Vuex 5](https://github.com/vuejs/rfcs/discussions/270) 的开发提案，但从 2022-02-07 在 Vue 3 被设置为默认版本开始， Pinia 已正式被官方推荐作为全局状态管理的工具。

diff --git a/docs/plugin.md b/docs/plugin.md
@@ -8,6 +8,8 @@ outline: 'deep'
 
 在 Vue 项目里，可以使用针对 Vue 定制开发的专属插件，也可以使用无框架依赖的通用 JS 插件，插件的表现形式也是丰富多彩，既可以是功能的实现，也可以是组件的封装，本章将从插件的使用到亲自开发一个小插件的过程，逐一讲解。
 
+<ReadingTips />
+
 ## 插件的安装和引入
 
 在 [前端工程化](guide.md#了解前端工程化) 十分普及的今天，可以说几乎所有要用到的插件，都可以在 [npmjs](https://www.npmjs.com/) 上搜到，除了官方提供的包管理器 npm ，也有很多种安装方式选择。

diff --git a/docs/router.md b/docs/router.md
@@ -16,6 +16,8 @@ outline: 'deep'
 路径别名可以在 `vite.config.ts` 等构建工具配置文件里添加 `alias` ，点击了解：[添加项目配置](upgrade.md#添加项目配置)
 :::
 
+<ReadingTips />
+
 ## 路由的目录结构
 
 Vue 3 引入路由的方式和 Vue 2 一样，路由的管理也是放在 src/router 这个目录下：

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "rootDir": ".",
+    "outDir": "dist",
     "types": ["node"],
     "paths": {
       "@/*": ["docs/*"]