diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index ac98aef..3580edd 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,7 +1,7 @@ module.exports = { base: '/vue3_study/', /* 基础虚拟路径 */ dest: 'docs/dist', /* 打包文件基础路径, 在命令所在目录下 */ - title: 'Vue3 快速上手', // 标题 + title: 'Vue3+TS 快速上手', // 标题 description: '尚硅谷前端研究院', // 标题下的描述 themeConfig: { // 主题配置 logo: '/images/logo.png', @@ -19,9 +19,9 @@ module.exports = { { text: '全套视频资料', link: 'http://www.gulixueyuan.com/' }, ], sidebar: [ // 左侧导航 - '列表', + '00_课程介绍', { - title: 'TypeScript快速上手', + title: '一.TypeScript快速上手', collapsable: false, children: [ { @@ -48,7 +48,7 @@ module.exports = { }, { - title: '初识 Vue3', + title: '二.Vue3快速上手', collapsable: false, children: [ 'chapter3/01_认识Vue3', @@ -56,7 +56,7 @@ module.exports = { ] }, { - title: 'Composition(组合) API', + title: '三.Composition API', collapsable: false, children: [ 'chapter4/01_Composition API_常用部分', @@ -66,15 +66,15 @@ module.exports = { ] }, { - title: '其它新语法', + title: '四.其它新组合和API', collapsable: false, children: [ 'chapter5/01_新组件', - 'chapter5/02_全局API更新', + 'chapter5/02_其他新API', ] }, { - title: 'Vue3版 TODO LIST', + title: '五.Vue3综合案例', collapsable: false, children: [ 'chapter6/', diff --git a/docs/.vuepress/public/images/ts.png b/docs/.vuepress/public/images/ts.png new file mode 100644 index 0000000..3d9810b Binary files /dev/null and b/docs/.vuepress/public/images/ts.png differ diff --git a/docs/.vuepress/public/images/ts_v3.png b/docs/.vuepress/public/images/ts_v3.png new file mode 100644 index 0000000..eca56fd Binary files /dev/null and b/docs/.vuepress/public/images/ts_v3.png differ diff --git a/docs/00_课程介绍.md b/docs/00_课程介绍.md new file mode 100644 index 0000000..445c863 --- /dev/null +++ b/docs/00_课程介绍.md @@ -0,0 +1,33 @@ +# 课程指南 +v3 + + + +ts + +
+ + +课程介绍:Vue是一套用于构建用户界面的**渐进式框架**。Vue.js 3.0 "One Piece" 正式版在2020年9月份发布,经过了2年多开发, 100+位贡献者, 2600+次提交, 600+次PR,同时Vue3也支持Vue2的大多数特性,且,更好的支持了TypeScript,也增加了很多的新特性,如:Composition API,新组件(Fragment/Teleport/Suspense)等等. +课程内容如下: + +#### 1.TypeScript 快速上手 + +#### 2.Vue3快速上手 + +#### 3.Vue3新特性 + +#### 4.Vue3综合案例 + +#### 5.Vue3 企业级项目(待发布) + +注:由于Vue3中可以更好的支持TypeScript内容,且,课程内容中涉及到TS的内容,鉴于部分学员对于TS并不是很了解,所以,课程内容先从TS开始讲解 + + + + + + + + + diff --git a/docs/README.md b/docs/README.md index c02150c..048844a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -6,5 +6,5 @@ heroImage: /images/vue3_logo.png # 按钮文本 actionText: 开始学习 → # 按钮点击跳转路径 -actionLink: /列表.md +actionLink: 00_课程介绍.md --- \ No newline at end of file diff --git a/docs/chapter1/01_初识TS.md b/docs/chapter1/01_初识TS.md index e37563d..0c1c514 100644 --- a/docs/chapter1/01_初识TS.md +++ b/docs/chapter1/01_初识TS.md @@ -1,5 +1,7 @@ # 1. 初识 TypeScript +![TS与JS.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28ca61cc160c417c8497a00defdca5f0~tplv-k3u1fbpfcp-watermark.image) + ## TypeScript 的介绍 TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。 @@ -15,7 +17,6 @@ TypeScript是为大型应用的开发而设计,并且可以编译为JavaScript TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6+ 的支持**,它由 Microsoft 开发,代码开源于 GitHub 上 **TypeScript 是 JavaScript 的一个超集**,主要提供了**类型系统**和**对 ES6+ 的支持**,它由 Microsoft 开发,代码[开源于 GitHub](https://github.com/Microsoft/TypeScript) 上 -![TS与JS.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28ca61cc160c417c8497a00defdca5f0~tplv-k3u1fbpfcp-watermark.image) ## TypeScript 的特点 diff --git a/docs/chapter3/01_认识Vue3.md b/docs/chapter3/01_认识Vue3.md index 337cfbe..f8f8157 100644 --- a/docs/chapter3/01_认识Vue3.md +++ b/docs/chapter3/01_认识Vue3.md @@ -4,8 +4,8 @@ - Vue.js 3.0 "One Piece" 正式版在今年9月份发布 - 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR -- ***Vue3支持vue2的大多数特性*** -- ***更好的支持Typescript*** +- **Vue3支持vue2的大多数特性** +- **更好的支持Typescript** @@ -14,25 +14,29 @@ - 打包大小减少41% - 初次渲染快55%, 更新渲染快133% - 内存减少54% -- ***使用Proxy代替defineProperty实现数据响应式*** -- ***重写虚拟DOM的实现和Tree-Shaking*** +- **使用Proxy代替defineProperty实现数据响应式** +- **重写虚拟DOM的实现和Tree-Shaking** -## 3) *Composition(组合) API* Option API +## 3) 新增特性 +- **Composition (组合) API** - setup -- ref 和 reactive -- computed 和 watch -- 新的生命周期函数 -- provide与inject -- ... + - ref 和 reactive + - computed 和 watch + - 新的生命周期函数 + - provide与inject + - ... +- 新组件 + - Fragment - 文档碎片 + - Teleport - 瞬移组件的位置 + - Suspense - 异步加载组件的loading界面 -## 4) 其它新增特性 +- 其它API更新 -- Fragment - 文档碎片 -- Teleport - 瞬移组件的位置 -- Suspense - 异步加载组件的loading界面 -- 全局API的修改 + - 全局API的修改 + - 将原来的全局API转移到应用对象 + - 模板语法变化 diff --git a/docs/chapter5/02_全局API更新.md b/docs/chapter5/02_其他新API.md similarity index 95% rename from docs/chapter5/02_全局API更新.md rename to docs/chapter5/02_其他新API.md index 3bd57a4..a855dd5 100644 --- a/docs/chapter5/02_全局API更新.md +++ b/docs/chapter5/02_其他新API.md @@ -1,4 +1,4 @@ -# 2. 全局API更新 +# 2. 其他新的API ## 全新的全局API - createApp() - defineProperty() diff --git a/docs/列表.md b/docs/列表.md deleted file mode 100644 index b484339..0000000 --- a/docs/列表.md +++ /dev/null @@ -1,6 +0,0 @@ -# 所有技术列表 - -- 技术1 -- 技术2 -- 技术3 -- 技术4