【2023秋第0节课】蓝山工作室前端开讲啦！！！2023年秋季前端课程即将发车，快来完成课前准备吧！

LanShanFE
1,467 阅读9分钟

image.png

本文编写自 26 届同学：写代码的小玉

📖 前言

欢迎加入蓝山工作室！

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

  • 狭义上的前端，我们可以开发用户图形交互页面，包括 HTML、CSS 和 JavaScript 基础三件套与 AJAX 完成浏览器网页的开发与后端通信。也可以利用各种上层框架跳脱传统浏览器的范畴，进行小程序、Android 和 iOS 应用、以及 Windows 和 macOS 桌面应用程序的开发。广义上的前端还可以利用前端的相关技术栈运行在服务端，来实现编写后端中间件，操作数据库等，进而能成为一名全栈工程师。
  • 前端三剑客(前端开发中需要用到的三种编程语言)：HTML、CSS、JavaScript
    • HTML：负责网页的架构，描述了网页的内容
    • CSS：负责网页的样式，美化
    • JavaScript：负责网页的行为，比如用户交互，实现网页功能等
  • 学习前端，你会与带有 .html .js .css .scss .less json .ts .vue .jsx 等后缀名的文件打交道，刚开始你可能感到陌生且害怕， 不要畏难，走出第一步，这就是进步的开始。
  • 下文为罗列了学习前端需要做的准备工作和一些实用工具，请耐心开始入门吧！

image.png

🔧 准备工具

PS. 记得为下载的软件合理安排好存储路径哦（指不要全存C盘）

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

浏览器

在电脑上下载浏览器，推荐谷歌浏览器、Arc 浏览器，这两个浏览器都是谷歌浏览器内核。

代码编译器（VSCode）

前端主流的代码编译器就是 VSCode 和 Webstorm，这里仅介绍 VSCode 的安装和配置，Webstorm 的使用请自行了解。

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

image.png

安装

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

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

了解编译器的基本使用

请自己探索 VSCode 上的每个功能区

  • 在 VSCode 中打开一个文件夹并新建文件
  • 搜索文件内容
  • 了解怎么下载插件（扩展）
  • 找到设置编译器的地方

熟悉编译器快捷键

vscode官方快捷键

为编译器安装插件

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

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

💻 Windows CMD 常用操作

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

命令行需要在终端输入。

打开终端的办法：

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

方法2：

  1. 点击右键
  2. 选择“在终端中打开”

观察在不同文件夹中打开终端，屏幕上显示的内容有什么不同。

命令的写法：

命令名 [选项] [参数]

常用命令

  • 切换磁盘：d:（进入 d 盘）
  • 切换磁盘和目录：cd /d d:/test（进入 d 盘 test 文件夹）
  • 进入文件夹：cd \test1\test2（进入 test2 文件夹）
  • 返回根目录：cd \
  • 回到上级目录：cd ..
  • 新建文件夹：md test
  • 显示目录中文件列表：dir
  • 显示目录结构：tree d:\test（d 盘 test 目录）
  • 显示当前目录位置：cd
  • 显示指定磁盘的当前目录位置：cd d:
  • 清除屏幕：cls
  • 删除文件：del 文件名
  • 移动文件：move 路径1 路径2

🚀 Node.js 环境配置

什么是 Node.js？

官方定义：

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

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

03-Node.js开发环境安装 | 千古前端图文教程 (qianguyihao.com)

🌏 Github 与 Git

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

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

Github需要一些特殊操作才能访问。

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

快速扫盲

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

安装 Git：Git 教程 | 菜鸟教程 (runoob.com)

git、github 保姆级教程入门，工作和协作必备技术，github提交pr - pull request_哔哩哔哩_bilibili

Git 基本理论

工作区域

Git 本地有三个工作区域： 工作目录（Working Directory）、暂存区(Stage / Index)、资源库( Repository / Git Directory)。

image27.png

  • Workspace： 工作区，就是你平时存放项目代码的地方
  • Stage：暂存区，用于临时存放你的改动，事实上它只是一个文件，保存即将提交到文件列表信息。
  • Repository： 仓库区（或本地仓库），就是安全存放数据的位置，这里面有你提交到所有版本的数据。其中 HEAD 指向最新放入仓库的版本。
  • Remote : 远程仓库，托管代码的服务器，可以简单的认为是你项目组中的一台电脑用于远程数据交换

工作流程

从工作区 add 到暂存区，从暂存区 commit 本地仓库，本地仓库 push 到远程仓库

创建工作目录与常用指令

工作目录一般就是你希望 Git 帮助你管理的文件夹，可以是你项目的目录，也可以是一个空目录，建议不要有中文。日常使用只要记住 6 个命令：

  • Remote ----> workplace: git pull
  • Remote ----> Repository: git fetch/clone
  • Repository ---> Remote: git push
  • Repository ---> workspace: git checkout
  • workspace ----> Index: git add
  • Index ----> Repository: git commit

image.png 一个简单的操作步骤

  1. git init 初始化仓库
  2. git add . 添加文件到暂存区
  3. git commit 将暂存区内容添加到仓库中

详细教学：

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

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

✏️ 学习 MarkDown 语法

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

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

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

下载typora

image.png

下载地址： Typora download

建议支持正版。

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

markdown语法

基本操作

标题

语法：

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

引用

语法：

> 引用内容1

> 引用内容2

>> 引用内容3

效果：

引用内容1

引用内容2

引用内容3

代码块

单行代码

语法：

`String str1 = "hello";`

效果：

String str1 = "hello";

多行代码

语法：

image.png 效果：

let name = 'lanshan'
name = 'lanshan-FE'
console.log(`我要加入${name}`)

无序列表

语法：

* 无序列表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（本地图片）：

使用本地的文件路径：

image.png

语法 2（网络图片）：

使用在线链接：

image.png

typora

超链接

语法 1：

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

语法 2：

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

效果：

github.com/

其他

斜体

语法：

*斜体*
_斜体_

效果：

斜体

加粗

语法：

**加粗**
__加粗__

效果：

加粗

删除线

语法：

~~删除线~~

效果：

删除线

📦 工具箱

在线工具箱 - 要你命3000 (tools.fun)

画图工具

Excalidraw | Hand-drawn look & feel • Collaborative • Secure

思维导图工具

  1. Xmind
  2. ProcessOn思维导图流程图-在线画思维导图流程图_在线作图实时协作
  3. MindMaster

图标下载网站

  1. iconfont-阿里巴巴矢量图标库
  2. Vector Icons and Stickers - PNG, SVG, EPS, PSD and CSS (flaticon.com)

截图工具 & 取色器

📌 学习资源推荐

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