feat: add TypeScript lessons and learning panel
- Introduced a new script to check TypeScript lesson files for errors. - Created a main TypeScript file to render lessons and their details. - Added lesson definitions with starter and answer codes. - Implemented a user interface for navigating and running lessons. - Styled the application with CSS for a better user experience. - Updated README to reflect the new TypeScript section and usage instructions.
This commit is contained in:
45
README.md
45
README.md
@@ -8,7 +8,8 @@
|
||||
- `02-css-layout`:预留给 CSS
|
||||
- `03-javascript-core`:预留给 JavaScript
|
||||
- `04-dom-events-async`:预留给 DOM + 事件 + 异步
|
||||
- `05-typescript`:预留给 TypeScript
|
||||
- `05-es6-plus`:预留给 ES6+(现代 JS)
|
||||
- `06-typescript`:预留给 TypeScript
|
||||
|
||||
## 当前可学内容
|
||||
|
||||
@@ -33,15 +34,41 @@
|
||||
- `starter.js` 起始代码
|
||||
- `answer.js` 参考答案
|
||||
|
||||
前三部分现在都已经补充到“核心主线 + 常见细分知识点”。
|
||||
现在也已经整理好 `04-dom-events-async`,里面包含:
|
||||
|
||||
- DOM + 事件 + 异步讲义
|
||||
- 分阶段练习
|
||||
- `starter.html` / `starter.js` 起始代码
|
||||
- `answer.html` / `answer.js` 参考答案
|
||||
|
||||
现在也已经整理好 `05-es6-plus`,里面包含:
|
||||
|
||||
- ES6+(现代 JS)讲义
|
||||
- 分阶段练习
|
||||
- `starter.html` / `starter.js` 起始代码
|
||||
- `answer.html` / `answer.js` 参考答案
|
||||
|
||||
现在也已经整理好 `06-typescript`,里面包含:
|
||||
|
||||
- TypeScript(类型系统)讲义
|
||||
- 分阶段练习
|
||||
- `starter.ts` 起始代码
|
||||
- `answer.ts` 参考答案
|
||||
- `Vite + TypeScript` 学习面板
|
||||
|
||||
前六部分现在都已经补充到“核心主线 + 常见细分知识点”。
|
||||
|
||||
## 使用方式
|
||||
|
||||
1. 先阅读 [01-html-structure/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/README.md)
|
||||
2. 再阅读 [02-css-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/README.md)
|
||||
3. 再阅读 [03-javascript-core/README.md](/Volumes/Macintosh HD 1/home/front-end-example/03-javascript-core/README.md)
|
||||
4. 按顺序完成每个练习目录
|
||||
5. 先写 `starter.html`、`starter.css` 或 `starter.js`
|
||||
6. 写完后再对照答案文件
|
||||
1. 先阅读 [01-html-structure/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/01-html-structure/README.md)
|
||||
2. 再阅读 [02-css-layout/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/02-css-layout/README.md)
|
||||
3. 再阅读 [03-javascript-core/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/README.md)
|
||||
4. 再阅读 [04-dom-events-async/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/README.md)
|
||||
5. 再阅读 [05-es6-plus/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/README.md)
|
||||
6. 再阅读 [06-typescript/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/README.md)
|
||||
7. 按顺序完成每个练习目录
|
||||
8. 先写 `starter.html`、`starter.css`、`starter.js` 或 `starter.ts`
|
||||
9. 写完后再对照答案文件
|
||||
10. 学 `06-typescript` 时,也可以进入 [06-typescript](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript) 后执行 `npm install` 和 `npm run dev`
|
||||
|
||||
如果你后面要继续学其他知识点,我可以按同样结构继续给你补 `04-dom-events-async`、`05-typescript` 等目录。
|
||||
如果你后面要继续学其他知识点,我可以按同样结构继续给你补更多工程化目录。
|
||||
|
||||
Reference in New Issue
Block a user