Merge pull request #32 from Chairowell/writing

📃 docs(writing): 更新文章

Author: Chairowell

src/vue/01.md

@@ -12,16 +12,18 @@ tags:
 
 ## Vue 介绍
 
-**Vue.js** 一套用于 ==构建用户界面== 的 **渐进式** JavaScript框架。
+**Vue.js** 一套用于 ==构建用户界面== 的 **渐进式** JavaScript 框架。
 
-> 渐进式：Vue 可以自底向上逐层地应用
+> 渐进式：可以自底向上逐层地应用
 
 - 简单应用：只需要一个轻量小巧的核心库
 - 复杂应用：可以引入各式各样的 Vue 插件
 
+[更多关于 Vue.js 的介绍 - Wikipedia](https://zh.wikipedia.org/wiki/Vue.js)
+
 ## Vue 是谁开发的？
 
-尤雨溪 (Evan You)
+[尤雨溪 (Evan You)](https://zh.wikipedia.org/wiki/%E5%B0%A4%E9%9B%A8%E6%BA%AA) [Github主页](https://github.com/yyx990803)
 
 - 2013 年 4 月 28 日，Evan You 发布了 Vue.js。
 - 2014 年 10 月 27 日，Vue.js 1.0 正式发布。
@@ -43,4 +45,5 @@ tags:
 
 ## 参考
 - [简介 | Vue.js](https://cn.vuejs.org/guide/introduction)
-- [Vue 简介 | bilibili](https://www.bilibili.com/video/BV1Zy4y1K7SH?&p=2)
+- [更多关于 Vue.js 的介绍 - Wikipedia](https://zh.wikipedia.org/wiki/Vue.js)
+- [Vue 简介 - bilibili](https://www.bilibili.com/video/BV1Zy4y1K7SH?&p=2)

src/vue/02.md

@@ -12,19 +12,123 @@ tags:
 
 ## 版本说明
 
-- 开发版本 `(vue.js)` ：包含完整的警告和调试模式，适合开发环境
-- 生产版本 `(vue.min.js)` ：删除了警告，并将代码压缩，适合生产环境
+### 版本号
+- `v2.x.x` / `vue@2` 版本：Vue 2 版本。
+- `v3.x.x` / `vue@3` 版本：Vue 3 版本。
 
-## 使用 `<script>` 标签直接引入
+> [!warning]
+>
+> ::: details 版本号之间的小区别
+>
+> `v3.x.x` 和 `vue@3.x.x` 是指定版本号。
+>
+> 而 `vue@3` 默认指的是最新版本。
+>
+> 例如：`vue@3.0.0` 指的是 `v3.0.0` 版本，`vue@3` 指的是 `v3.5.13` 版本（在本文编写时，vue 的最新版本是 v3.5.13）。
+>
+> :::
+
+### 版本类型
+
+- 全局构建版本 `.global` ：适用于无需构建工具，直接在 HTML 文件中引入 Vue 的场景。
+- 开发版本 `.dev` ：包含完整的警告和调试模式，适合开发环境。
+- 生产版本 `.min` / `.prod` ：删除了警告，并将代码压缩，适合生产环境。
+
+::: details **其他版本类型说明**
+
+- CommonJS 模块化版本 `.cjs` ：适用于 Node.js 环境。
+
+- 运行时构建版本 `.runtime` ：此版本不包含模板编译器，因此不支持在客户端编译模板。适用于已经通过构建工具（如 webpack 或 Vite）预先编译模板的应用。
+  
+- 适用于浏览器的 ES 模块化版本 `.esm-browser` ：此版本使用原生 ES 模块语法，适合现代浏览器，支持通过 `<script type="module">` 标签直接在浏览器中引入。
+
+- 适用于打包工具（如 webpack 2 或 Rollup）的 ES 模块构建版本 `esm-bundler` ：此版本设计为可被静态分析，支持 tree-shaking，以便打包工具优化最终的包体积。
+
+:::
+
+### 示例说明
+
+`vue/3.5.13/vue.global.js` 是全局构建版本的 Vue 3.5.13 版本。
+
+`vue/3.2.10/vue.esm-browser.min.js` 是适用于浏览器的 ES 模块化版本的 Vue 3.2.10 版本。
+
+## 通过 CDN 下载
+
+> CDN (Content Delivery Network) 即内容分发网络，通过在网络上提供一系列的缓存版本的资源文件，来加速网站的访问速度。
+
+::: code-tabs
+
+@tab Unpkg
+```shell:no-line-numbers
+https://unpkg.com/vue@3/dist/vue.global.js
+```
+
+@tab JSDelivr
+```shell:no-line-numbers
+https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js
+```
+
+@tab CDNJS
+```shell:no-line-numbers
+https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.global.js
+```
+
+:::
+
+::: tip
+由于国内的网络环境问题，这些 CDN 有时候并没有办法流畅访问。
+
+所以我们建议将 Vue 下载到本地后再进行学习。
+
+:::
+
+## 通过 **`<script>` 标签** 进行引入
 
 ```html:no-line-numbers
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script src="./vue.global.js"></script>
 ```
 
-## 使用 npm 安装
+::: tip
+
+我们推荐刚刚接触 Vue 的开发者通过 `<script>` 标签的方式引入 Vue，这样可以快速上手。
+
+等我们熟悉 Vue 的基础语法和 API 后，会再返回来学习使用 **命令行工具** 进行安装。
+
+所以，我们可以先 **跳过** 命令行工具的部分，继续进行后面的学习。
+
+:::
+
+## 使用 **命令行工具** 进行安装
+
+```bash:no-line-numbers
+// 安装 Vue CLI
+npm install -g @vue/cli
+
+// 创建一个新项目
+vue create [my-project]
+
+// 启动项目
+cd [my-project]
+npm run serve
+```
+
+## 安装 VueDevTools
+
+VueDevTools 是 Vue 官方提供的浏览器插件，它可以帮助我们更好地调试 Vue 应用。
+
+![VueDevTools](./image/VueDevTools.png)
+
+- [VueDevTools - Chrome 网上应用店](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+- [VueDevTools - Firefox 附加组件](https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/)
+- [VueDevTools - Edge 应用商店](https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl)
+
+::: warning
 
+Edge 和 Firefox 版本的 VueDevTools 插件更新速度会比较慢，建议使用 Chrome 版本的插件。
 
+:::
 
 ## 参考
 
-- [](https://www.bilibili.com/video/BV1Zy4y1K7SH?&p=4)
+- [快速上手 | Vue.js](https://cn.vuejs.org/guide/quick-start)
+- [搭建 Vue 开发环境 - bilibili](https://www.bilibili.com/video/BV1Zy4y1K7SH?&p=4)

src/vue/README.md

@@ -1,5 +1,5 @@
 ---
-title: Vue 课程流程
+title: Vue 课程笔记
 article: false
 category: 笔记
 tags:
@@ -8,7 +8,7 @@ tags:
   - VS Code
 ---
 
-# Vue 课程流程
+# Vue 课程笔记
 
 1. vue基础
 2. vue-cli