打造高效的前端开发环境

开学第一课作业

1. 软件安装

1.vscode
2.chrome
3.phpEnv

一、前端开发

1.安装vscode和插件
首先在百度上搜索到vscode找到官网下载，下载完成后双击打开自动识别本机系统，自动配备安装，安装完成后自动提示安装汉化插件。

序号	名称	描述
1	Chinese (Simplified)	简体语言包
2	Code Spell Checker	拼写检查
3	Dracula Official	主题（吸血鬼）
4	Helium Icon Theme	图标主题
5	Markdown Preview Enhanced	预览图标
6	markdownlint	语法检验
7	Material Product Icons	产品图标
8	Prettier - Code formatter	代码格式化
9	Auto Close Tag	自动关闭标签
10	Auto Rename Tag	自动重命名标签
11	Better Comments	更好的评价
12	CodeSnap	编码捕捉器
13	Highlight Matching Tag	高亮显示匹配标签
14	Live Server	实时预览html
15	CSS Peek	自动跳转到SS定位的位置查看

2.安装chrome谷歌浏览器与插件

序号	名称	描述
1	Adblock Plus	免费的广告拦截器
2	Charset	修改网站的默认编码
3	FeHelper	前端助手
4	Infinity	新标签页
5	Vue.js devtools	查看视图
6	划词翻译
7	清除历史记录	-

3.安装phpenv开发环境

打开Microsoft Edge浏览器，搜索phpEnv找到专业优雅强大的php集成环境--点击前往下载
phpEnv(Windows 64位)，免安装.NET环境
安装版（官网下载）
安装完毕后--点击打开--开始--软件设置--高级设置--将新增站点后自动写入hosts打开，新增、保存站点后自动重启服务也打开。
开始--软件设置--环境设置--将默认Web服务Nginx,更改为Apache
安装完成后--点击启动--Apache 和MySQL两个红点变为绿点就开启了。

3.主题切换

打开vscode开发环境编辑器
文件—首先项—颜色主题、文件图标主题、产品图标主题，都可以切换
管理—颜色主题、文件图标主题、产品图标主题，都可以切换

4.正式进入学习过程

教学内容

1.学习方式
2.开发环境
3.HTTP
4.URL
5.MarkDiwn

1.学习方式

1.如何看直播？
2.如何看回放？
打开网站—输入php.cn—进入php中文网—视频教程—直播教程—找到前端开发—观看直播
教学视频回放—课程目录
教学课件下载—课件下载
3.如何写作业?
在打开的网站里找到我的博客—栏目管理—新增栏目—栏目名称—前端开发—栏目简介—21期—保存
写作业—点击文章管理—发布文章—请选择文本编辑器-点击markdown编辑器—支持边写边预览
写完后提交—-文章标题—提交—所属栏目-前端开发—状态-作业—文章标签-|-HTML—立即发布
4.如何提问？
一定在QQ群里提问
提问尽量与教学同步

2.开发环境

1.chrome:https://www.google.cn/intl/zh-cn/chrome/
2.vscode:https://code.visualstudio.com/
3.phpEnv:https://phpenv.cn/

3.ＭarkDown

创建一个文件 markdown.md

markdown 最终会转为 html

(1) Markdown 用途

1.写作业：技术博客
2.写文档：API 接口

(2) Markdown 语法

1.标题

1.# 一级标题    //一个文档只允许有一个大标题 '#'
2.## 二级标题    //一个文档只允许有二个及以上大标题 '##'
3.### 三级标题
4.#### 四级标题
5.##### 五级标题
6.###### 六级标题

2.分隔符

 ---
至少三个－

3.段落

markdown 是一种纯文本的标记语言
加一空行
第二段内容

4.字体样式

**加粗**
＿斜体＿
＿**内容**_
~~删除线～～

5.引用

这是一个引用内容

二级引用

三级引用 //多级引用以此类推

6.列表

（1） 无序

• list1
• list2
• list3
  • list1
  • list2
  • list3

（2） 有序

1. list1
2. list2
3. list3
   3.1. list1
   3.2. list2
   3.3. list3

7.代码

（1） 单行： `` // 一对反引号 例 `const num = 100`
 (2) 多行： ``` // 三个反引号 上 下　中间写代码
            ``` 

8.表格

序号	姓名	性别	工资
1	朱老师	男	12345
2	欧阳老师	男	45678
3	灭绝老师	女	56789

注：竖线和减号必须在英文状态下写的才可以

9.链接

php 中文网
https://www.php.cn

10.图像

右键图片—复制图片地址—粘贴过来即可