个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！
文章目录
- 💯前端学习相关软件工具和设置
- 🍊1.安装轻量级Markdown编辑器 Typora
- 🍊2.安装谷歌浏览器
- 🍊3.安装编码神器，VSCode
- 🍋3.1 VSCode的使用
- 🍋3.2 VSCode新增 lang 属性代码
- 🍋3.3 VSCode代码禁用补全和提示
- 🍋3.4 取消容易混淆字符
- 💯前端学习路线
- 🍊第一阶段：前端开发基本功
- 🍊第二阶段：页面布局实战
- 🍊第三阶段：前端开发内功
- 🍊第四阶段： PC 端全栈项目开发
- 🍊第五阶段：前端高级框架技术
- 🍊第六阶段：混合应用开发技术
- 🍊第七阶段：原生应用开发技术
- 🍊第八阶段：大前端架构
💯前端学习相关软件工具和设置
工欲善其事，必先利其器
🍊1.安装轻量级Markdown编辑器 Typora
Typora：用于每日学习的记录
- 破解参考：https://t.doruo.cn/1a6dMMKNa
- Typora常用语法汇总：https://zhuanlan.zhihu.com/p/108984311
🍊2.安装谷歌浏览器
Google 浏览器：用于预览代码效果，调试开发代码
- 官网下载地址：https://www.google.cn/chrome/
- 安装方法：下载exe，双击默认安装即可
🍊3.安装编码神器，VSCode
VSCode 编辑器：用于编写代码
-
官网下载地址：https://code.visualstudio.com/
- 域名更换成国内镜像：域名“az764295.vo.msecnd.net”进行替换成国内镜像“vscode.cdn.azure.cn”
- 迅雷下载：需要安装迅雷软件
-
安装方法：下载exe，双击默认安装即可
-
VSCode 插件安装：
- 汉化包：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- 实时预览代码：live Server
- 打开网页文件：open in browser
-
VSCode 创建项目及编写代码文件，预览
🍋3.1 VSCode的使用
- 双击打开软件。
- 保存（Ctrl + S ）, 注意移动要保存为 .html 文件
- Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图
- 生成页面骨架结构
- 输入
!按下 Tab 键。
- 输入
- 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。
🍋3.2 VSCode新增 lang 属性代码
html标签的lang属性：
- en定义语言为英语
- zh-CN定义语言为中文
- 其他
简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页。
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
这个属性对搜索引擎还是有作用的，其他可参考：https://www.runoob.com/tags/att-global-lang.html。
🍋3.3 VSCode代码禁用补全和提示
在初学时，我们可以Vscode的代码提示禁用，以便我们学习更好地熟悉编写代码。
{
...
"editor.parameterHints": false,
"editor.wordBasedSuggestions": false,
"editor.snippetSuggestions": "none",
// 控制键入时是否应自动显示建议
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
},
// 控制键入触发器字符时是否应自动显示建议
"editor.suggestOnTriggerCharacters": false,
"files.autoSave": "off",
...
}
以下是操作步骤：
🍋3.4 取消容易混淆字符
VSCode属于微软开源编辑器，它默认建议使用全英文编写。
所以在英文和中文一些标点符号是有区别的，编辑器提示你容易混淆的字符，不是错误。
取消步骤：依次点击“文件->首选项->设置”项。
在设置界面中，勾选“Unicode Highlight: Ambiguous Characters”项的方框，这样就能成功地设置突出显示易混淆字符。
搜索关键字：“混淆”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="kewords" content="持续学习">
<meta name="description" content="持续学习">
</head>
<body>
<div>
<p>Practice makes perfect!</p>
</div>
</body>
</html>
💯前端学习路线
🍊第一阶段：前端开发基本功
俗话说的好“不积跬步 ，无以至千里” ，学习也是一样的从简单的基础的知识点开始慢慢积累 ，首先就是 掌握前端语言的基础知识 3 大部分（ HTML、CSS、页面制作工具）其中包含了元素和属性、表单和图形 处理、CSS 基本语法与选择器、文本、边框、轮廓与颜色、SS 列表、表单与表格样式、CSS 样式层叠与继 承、PhotoShop 的使用和图片整合、mark man、pxcook 工具使用等等小点。
学习完获得初级 Web 前端工程师水平 ，熟悉前端开发的 HTML 与 CSS 基础知识。能够配合 UI 设计师进 行项目开发。
🍊第二阶段：页面布局实战
这个阶段就是掌握 2 大部分（布局技术、布局规范与方案）其中包含了 BFC、IFC、GFC、FFC、Flex 弹性
布局、网格布局、媒体查询、viewport、remvw、 dpr与 ppi、PC 端网站布局规范响应式布局、移动端 设备适配最佳实践、流式布局 (100%布局)等小点。
学完获得初级 Web 前端工程师水平，能够完成各种 PC 端与移动端网页布局与样式设计实现。可以做各浏 览器兼容与设备适配。
🍊第三阶段：前端开发内功
这个阶段就是掌握 4 大部分（面向对象进阶与 ES 应用、原生 JavaScript 交互功能开发、JavaScript 具库 自主研发、原生 JS 经典交互特效开发）其中包含了 Promise、async/await 语法、try/catch 语法、原型 链、基本语法、流程控制语句、函数与数组、String 与 Date、BOM 与 DOM、DOM 库、事件库、原型 和继承库等小点。
学完获得中级 Web 前端工程师水平 ，主要进行页面行为交互实现网站中常见交互特效
🍊第四阶段： PC 端全栈项目开发
这个阶段就是掌握 4 大部分（前端工具库、前端工程化与模块化、Node.jS 服务端开发、PC 端网站开发） 其中包含了 Node 基础入门、Express 框架基础、中间件开发、MVC 开发模式、基于 Express 的后端路 由、Animate CSS、VanillaJs、Lodash、Swiper、axios、Moment.js 等小点。
学完获得中级 Web 前端工程师水平 ，并能配合 UI 和后台实现项目
🍊第五阶段：前端高级框架技术
这个阶段就是掌握 5 大部分（React、Vue、全栈 web3.0 开发、数据可视化、Angular）其中包含了 React 18、ReactRouter6、Umi 技术、Vue3 选项式 API、Vue3 组合式 API、Vite2+SFC、VueRouter4、Vuex4、 Angular 脚手架与创建命令、TypeScript 语法与修饰模式、Ng 服务与依赖注入等小点。
学完获得高级 Web 前端工程师水平 ，主要进行前后端全栈开发。能够独立完成一个中小项目的前后台。 对于 Web 开发有着非常熟练的编程能力.
🍊第六阶段：混合应用开发技术
这个阶段就是掌握 4 大部分（微信小程序、微信公众号、Electron 技术、PWA 技术）其中包含了微信内 置公众号定制、JSSDK 接入、公众号常见功能开发、微信小程序基础、小程序高级应用、原生多端小程序 开发、Electron 入门、Electron 调试技巧、Electron 主进程与渲染进程 API 等小点。
获得高级 Web 前端工程师水平，主要进行混合式 App 项目开发。能够实现多端开发并拥有多端开发能力， 整合资源 ，实现跨平台跨设备的架构能力
🍊第七阶段：原生应用开发技术
这个阶段就是掌握 2 大部分（ReactNative、Flutter）其中包含了 Flutter 环境搭建、界面结构与基础部件、 布局与表单、RN 环境搭建、RN 基础组件、RN 动画和手势、框架基础、内置组件、 自定义组件等小点。
获得大前端高级开发工程师水平，主要涉猎原生 APP 开发。主导移动端多元产品项目实现。能够跨平台开 发提出可建设性解决方案
🍊第八阶段：大前端架构
开发工具及服务器技术、前端性能、微前端架构，其中包含 Webpack5、Vite2、Git 工具及 GitHub/Gitee、 ESLint 与单元测试、SSR 技术、Nuxt.js 服务器端渲染、Next.js 服务器端渲染、基于 Webpack +Vue+React 微前端实战等小点。
前端学习相关软件工具和设置:http://t.csdnimg.cn/N5mB2
