【2024秋第0节课】蓝山工作室前端前导课

Virtuoso
770 阅读15分钟

标题.png

【2024秋第0节课】蓝山工作室前端前导课

前言

欢迎加入蓝山工作室！

在正式开始学习前端之前，我们有必要了解一下前端是什么。

  • 狭义上的前端，我们可以开发用户图形交互页面，包括 HTML、CSS 和 JavaScript 基础三件套与 AJAX 完成浏览器网页的开发与后端通信。也可以利用各种上层框架跳脱传统浏览器的范畴，进行小程序、Android 和 iOS 应用、以及 Windows 和 mac 桌面应用程序的开发。广义上的前端还可以利用前端的相关技术栈运行在服务端，来实现编写后端中间件，操作数据库等，进而能成为一名全栈工程师。

  • 前端三剑客(前端开发中需要用到的三种编程语言)：

    • HTML：负责网页的架构，描述了网页的内容
    • CSS：负责网页的样式，美化
    • JavaScript：负责网页的行为，比如用户交互，实现网页功能等

  • 除此之外，我们非常注重前端工程化，以提高自己前端的核心竞争力。包括编写vite webpack等构建或打包工具的插件，组件库的开发，ssg站点生成脚手架等。如果你感兴趣还可以格外学习一门静态语言，如rust或go,但是最重要的是掌握好ts,就是我们熟知的typescript,javascript原本是一门动态语言，ts就是在js的基础上实现了类型检查的功能，类型检查机制的添加方便了后续程序员对代码的维护。

    大前端时代，和我们一起远航！

  • 学习前端，你会与带有 .html .js .css .scss .less json .ts .vue .jsx 等后缀名的文件打交道，刚开始你可能感到陌生且害怕， 不要畏难，走出第一步，这就是进步的开始。

准备工具

以下给出的教程链接仅作参考，通过其它的途径学习也是可以的，重点是达到学习目标。

魔法工具

一些懂的都懂的东西

为什么我 github 只能看运气进? 为什么我 git 老是推不上去? 为什么我项目拉不下来?

这些问题都是懂得都懂的，除了换镜像源之外该怎么解决呢? 挂加速器可以解决一时之需，无论是游戏加速器还是Watt Toolkit，都能加速github 等一些学术网站 如果你之后有更深的需求，这里不方便说，来私聊群里的学长学姐

浏览器

在电脑上下载浏览器，推荐谷歌浏览器、edge 浏览器。

设置默认浏览器： 控制面板-- 查看方式(小图标)--默认程序----浏览器--将html，htm更改为谷歌浏览器

推荐一个好用的翻译插件（谷歌）

1.在拓展程序搜索

61ac3b2b-9b70-4619-8345-cb3bfec66a70.png

2.沉浸式翻译

447b5a92-7a2d-4f76-b674-ae68d252b841.png

代码编译器（VSCode和Webstorm）

前端主流的代码编译器就是 VSCode 和 Webstorm，可以按照个人喜好自行安装 (安装过程中有问题都欢迎来问学长们)

VSCode

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。同时它也是使用前端相关技术栈开发的，对前端工程师天生友好。

安装

请到官网下载 VSCode：Visual Studio Code - Code Editing. Redefined

VSCode 安装指南：VScode 教程 | 菜鸟教程 (runoob.com)

熟悉编译器快捷键

vscode官方快捷键

为编译器安装插件

PS. 注意看清楚每一个配置是什么功能哦！这也是帮助你了解前端开发工具的过程

  1. 能让你开发效率翻倍的VSCode插件配置(上)
  2. 能让你开发效率翻倍的VSCode插件配置(中)
  3. 视频版配置

几个建议的插件


Chinese Language Pack for（看得懂英语就没必要）

汉化插件



Live Server

‌Live Server的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。 它通过热重载功能，使得开发者在浏览器中实时预览正在编辑的网页，每当保存HTML、CSS、JavaScript文件时，插件会自动刷新浏览器，使开发者能够立即看到页面的更改效果‌



Error Lens

‌Error Lens,其主要作用是实时显示代码中的规范错误和逻辑问题，提供直观的错误提示，帮助开发者快速定位和解决问题。



vscode-icons

vscode-icons的主要作用是提升开发环境的直观性和易用性。通过提供直观的文件和文件夹图标，vscode-icons让代码编辑环境更加美观、直观，

Webstorm

这个需要得到官方申请的，流程如下：

1、首先，得先有我们的重庆邮电大学学生教育邮箱：

resource/pic/1.png

登录网址：点击这里

账号：学号 + @stu.cqupt.edu.cn

密码：Cqupt. + 身份证后六位（注意有个点.）

如果忘记密码可以到行政楼更改密码，记得带上可以证明你身份的证件

2、进入JetBrains Toolbox 申请 Webstorm 专业版的官网：点击这里

81ce4155-11ab-45e5-8b61-e1c0875c4838.png

1727847404008.png

68747470733a2f2f696d6167652d3968382e70616765732e6465762f66696c652f3136373262356464323563373230393862353165642e706e67.png

68747470733a2f2f696d6167652d3968382e70616765732e6465762f66696c652f3733636263623132633933653331623330326635632e706e67.png

点击那个网址:或点这里也可以

3、登录学信网，完善基本信息就可以了

resource/pic/6.png

resource/pic/7.png

完了过后 查看申请在线验证报告

resource/pic/8.png

将这个截图保存下来

并复制那个 在线验证码

resource/pic/9.png

添加图片,填写验证码提交就可以

等一到两周会给教育邮箱发消息，到时候注意查看！！

windows CMD 常用操作

这里介绍一下 Windows 的相关操作。

命令行需要在终端输入。

打开终端的办法：

  1. win + R
  2. 在弹出的输入框里输入 cmd
  3. 按下回车键

方法2：

  1. 点击右键
  2. 选择“在终端中打开”
指令作用
d:（进入 d 盘）切换磁盘
cd /d d:/test（进入 d 盘 test 文件夹）切换磁盘和目录
cd \test1\test2（进入 test2 文件夹）进入文件夹
md test新建文件夹
dir显示目录中文件列表
tree d:\test（d 盘 test 目录）显示目录结构
cls清除屏幕
del 文件名删除文件
move 路径1 路径2移动文件

Node.js 环境配置

什么是 Node.js？

官方定义：

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理工具 npm 是全球最大的开源库生态系统。

(看不懂没关系，跟着教程先配好，以后能用上)

Github 与 Git

Github

Github 是一个网上代码托管平台，可以理解为一个开放式的网盘，用户可以根据链接找到别人写的代码，并下载下来，也能把自己的代码上传到网站，让所有人看到。

之后需要用到 Github 下载课件，并上传自己的作业。

Github需要一些特殊操作才能访问。 (详情可见魔法工具)

请进入Github官网并注册一个自己的账号。

视频

GitHub介绍：如何找公开的软件、项目、代码等 - 开源的意义和知识的突破 opensource_哔哩哔哩_bilibili

Git

  • 官方话：Git是一个免费的开源分布式版本控制系统，旨在快速高效地处理从小型到大型项目的所有事务。

为什么要学习Git

  • 面试要被问。可以应付面试。
  • 很多公司开发都用Git来处理项目。现在不学，以后肯定还要学。
  • Git是现如今所有程序员都要掌握的，以后与同事共同开发项目必定要用到的，熟练掌握Git命令，可以提高开发的效率。

Git 安装配置

在使用 Git 前我们需要先安装 Git。

Git 目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行。

Git 各平台安装包下载地址为：git-scm.com/downloads

仓库

img

  • 本地仓库是对于远程仓库而言的。
  • 本地仓库 = 工作区 + 版本区
  • 工作区即磁盘上的文件集合。
  • 版本区(版本库)即.git文件

提交到GitHub

  1. git init .初始化，表示把这个文件变成Git可以管理的仓库。初始化后打开隐藏的文件可以看到有一个.git文件。
  2. git add . 后面的一个点表示把这个文件全部提交到暂存区。
  3. git add ./readme.md/ 表示把这个文件下面的readme.md文件提交到暂存区。
  4. git commit -m "你要评论一点什么东西" git commit的意思是把暂存区的全部文件提交到本地仓库。-m后接评论。
  5. git remote add origin https://github.com/name/name_cangku.git表示把你本地的仓库与GitHub上的远程仓库连接起来。只需要连接一次，以后提交的时候就可以不用这条命令了。name是你的github名字，name_cangku是你的仓库名。注意不要把后面的.git给漏掉了。
  6. git push -u origin master 把本地仓库提交到远程仓库。(最后一步)在你的远程仓库上刷新一下就可以看到你提交的文件了。
  7. 最后提到的是，在git commit -m ""之前，可以重复git add到暂存区。但是git commit会把你之前存放在暂存区的全部文件一次性全部提交到本地仓库。

由于是导入课，所以对git的介绍不是很详细，如果对git操作感兴趣可以查看这篇文章

常用Git命令总结

可以自己动手实验一下

  • git config --global user.name "你的名字" 让你全部的Git仓库绑定你的名字
  • git config --global user.email "你的邮箱" 让你全部的Git仓库绑定你的邮箱
  • git init 初始化你的仓库
  • git add . 把工作区的文件全部提交到暂存区
  • git add ./<file>/ 把工作区的<file>文件提交到暂存区
  • git commit -m "xxx" 把暂存区的所有文件提交到仓库区，暂存区空空荡荡
  • git remote add origin https://github.com/name/name_cangku.git 把本地仓库与远程仓库连接起来
  • git push -u origin master 把仓库区的主分支master提交到远程仓库里
  • git push -u origin <其他分支> 把其他分支提交到远程仓库
  • git status查看当前仓库的状态
  • git diff 查看文件修改的具体内容
  • git log 显示从最近到最远的提交历史
  • git clone + 仓库地址下载克隆文件
  • git reset --hard + 版本号 回溯版本，版本号在commit的时候与master跟随在一起
  • git reflog 显示命令历史
  • git checkout -- <file> 撤销命令，用版本库里的文件替换掉工作区的文件。我觉得就像是Git世界的ctrl + z
  • git rm 删除版本库的文件
  • git branch 查看当前所有分支
  • git branch <分支名字> 创建分支
  • git checkout <分支名字> 切换到分支
  • git merge <分支名字> 合并分支
  • git branch -d <分支名字> 删除分支,有可能会删除失败，因为Git会保护没有被合并的分支
  • git branch -D + <分支名字> 强行删除，丢弃没被合并的分支
  • git log --graph 查看分支合并图

详细视频教学：

视频教程： 【一起学】超级简单的git教程_哔哩哔哩_bilibili 【狂神说Java】Git最新教程通俗易懂_哔哩哔哩_bilibili（里面 Gitee 的部分可以跳过）

文档版教程：Git 教程 | 菜鸟教程 (runoob.com)

学习 MarkDown 语法

Markdown 是一种 轻量级 标记语言，创始人是 约翰·格鲁伯（John Gruber）。它允许人们使用易读易写的纯文本格式编写文档。

本篇教程就是用 Markdown 写成的。

学习 Markdown 格式可以提高你的文本编辑和写作效率，使你的内容更具可读性和可分享性。无论是在个人使用还是团队协作中，掌握 Markdown 格式都是一项有用的技能。

于是写好Markdown后，如何将其显示成我们想要的格式呢？通常的做法是将Markdown编译为HTML。其实一些网站已经自带了这样的编译器，输入Markdown代码后直接将其转化为HTML，就可以交给浏览器渲染了。GitHub上的README以及各种.md格式文件的预览功能就是最典型的例子。

Markdown 编写的文档后缀为 .md, .markdown

什么地方会用到markdown？

Markdown可以广泛用于文档、博客、论坛等带格式文本内容的创作，习惯后使用起来会比所见即所得的HTML编辑器更加方便快捷，较Word等格式又有纯文本这一优势。

下载typora

image.png

下载地址： Typora download

有条件的可以支持正版，破译版可以联系学长要

或者自行查找适合自己的 MD 编辑器。

markdown语法

基本操作

标题

语法：

#       一级标题    
##      二级标题    
###     三级标题    
####    四级标题    
#####   五级标题    
######  六级标题

效果：

一级标题

二级标题

三级标题

四级标题
五级标题
六级标题
引用

语法：

> 引用内容1

> 引用内容2

效果：

引用内容1

引用内容2

代码块

单行代码

语法：

`String str1 = "hello"`

效果：

String str1 = "hello"

无序列表

语法：

* 无序列表1
+ 无序列表2
- 无序列表3

效果：

  • 无序列表1

  • 无序列表2

  • 无序列表3

多行无序列表

语法：

* 多行无序列表1
TAB * 多行无序列表2
TAB TAB * 多行无序列表3

效果：

  • 多行无序列表1
    • 多行无序列表2
      • 多行无序列表3
有序列表

语法：

1. 有序列表1
2. 有序列表2
3. 有序列表3

效果：

  1. 有序列表1
  2. 有序列表2
  3. 有序列表3

多行有序列表

语法：

1. 多行有序列表1
2. 多行有序列表2
    1. 多行有序列表2-1
    2. 多行有序列表2-2
3. 多行有序列表3
    1. 多行有序列表3-1
    2. 多行有序列表3-2

效果：

  1. 多行有序列表1
  2. 多行有序列表2
    1. 多行有序列表2-1
    2. 多行有序列表2-2
  3. 多行有序列表3
    1. 多行有序列表3-1
    2. 多行有序列表3-2
超链接

语法 1：

[百度](https://www.baidu.com/)

语法 2：

[CSDN][CSDN网址]
[CSDN网址]:https://www.csdn.net/

效果：

github.com/

学习资源推荐

  1. 稀土掘金
  2. 千言前端 前言 | 千古前端图文教程 (qianguyihao.com)
  3. 黑马程序员（bilibili）
  4. 尚硅谷（bilibili）
  5. 菜鸟教程 菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

最后的话

提问

问问题要讲究策略

你可以根据以下顺序尝试解决你的问题：

  1. 百度/Google
  2. CSDN/掘金
  3. gpt、ai

怎么问问题？

  • 精确地描述问题

  • 仔细、清楚地描述你的问题或者Bug的症状

  • 描述问题发生的环境

  • 描述在提问前你是怎样去研究和解决这个问题的

  • 描述在提问前你为了确定问题而采取的诊断步骤

  • 尽可能地提供一个可以重现这个问题的可控环境的方法

  • 话不在多，在于精

    你需要提供精确有内容的信息

    这并不是要求你简单的就把成堆的错误代码或者资料完全放在你的提问中，如果你的问题是一个很大的程序挂，就先截图这一个代码运行环境，尽量把它剪裁得越小越好。

  • 清楚明确地表达你的需求

  • 截图的方式

    不要手机拍照！不要手机拍照！不要手机拍照！

一点寄语

到了文档的最后，我想给想给各位学弟学妹们说点和前端学习关联没这么大的话

是否你看文档时觉得枯燥乏味？是否在配环境时感觉焦急燥热？

是否觉得前导课就如此复杂，心生了退出的想法？

但是我想说的是看到这里的朋友们，你们已经超越了和你们一个年纪的很多人，同我们的宣传口号一样，有梦想，你就来, 任何学习的路都不是一帆风顺，和一群志同道合的同学,学长一起学习进步，未尝不是一件快乐的事，有意义的事。

最后祝愿你们的每一次付出都不会被辜负 大前端时代，和我们一起远航！

avatar
文章
阅读
粉丝