0
点赞
收藏
分享

微信扫一扫

❤ 前端实现发邮件

泠之屋 03-05 21:00 阅读 3

 一.什么是Web?

        Web:全球广域网,也称为万维网(www World Wide Web),能够通过浏览器访问的网站

二.Web网站的工作流程

三.Web网站的开发模式

3.1 前后端分离开发(主流)

3.2 混合开发

四.初识Web前端

网页有哪些部分组成?

        文字、图片、音频、视频、超链接……

网页背后的本质是什么?

        程序员写的前端代码

 前端代码是如何转换成用户眼中的网页的?

        通过浏览器转化(解析和渲染)成用户看到的网页

        浏览器中对代码进行解析渲染的部分,称为浏览器内核

提示:不同的浏览器,内核不同,对相同的前端代码解析的效果会存在差异

4.1 Web标准

        Web标准也称为网页标准,由一系列的标准组成,大部分由W3C(World Wide Web Consortium,万维网联盟)负责指定

三个组成部分:

        HTML:负责网页的结构(页面元素和内容)

        CSS:负责网页的表现(页面元素的外观,位置等页面样式,如颜色、大小等)

        JavaScript:负责网页的行为(交互效果)

五.前端开发工具VS Code

Visual Studio Code(简称VS Code)是Microsoft于2015年4月发布的一款代码编辑器

VS Code对前端代码有非常强大的支持,同时也支持其他编程语言(C++、Python、Java等)

VS Code提供了非常强大的插件库,大大提高了开发效率

5.1 VS Code 安装文档

5.1.1 下载

        进入VS Code官网:Visual Studio Code - Code Editing. Redefined,点击 DownLoad for Windows 下载(有Windows版本 或 Mac OS 版本)

        · Stable:是稳定版

        · Insiders:是内测版

5.1.2 安装

        双击安装包,选择 我同意此协议 ,再点击 下一步

        选择安装路径,点击 下一步 。也可以使用默认值:C:\Users\super\AppData\Local\Programs\Microsoft VS Code

        继续点击下一步可以勾选创建桌面快捷方式,如果不想使用vscode作为代码默认打开方式,可以取消 将code注册为受支持的文件类型的编辑器 ,点击下一步

        点击安装,安装完成,运行VS Code。

5.1.3 VS Code插件安装

        VS Code提供了非常丰富的插件功能,根据你的需要,安装对应的插件可以大大提高开发效率。

前端开发常见插件介绍:

1.Chinese (Simplified) Language Pack

        适用于VS Code的中文(简体)语言包

2.Code Spell Checker

        拼写检查器。比如banana单词写错成banane,会提示你是否修改成banana,也可以将 banane添加至检查器的字典中。

3.HTML CSS Support

        在编写样式表的时候,自动补全功能大大缩减了编写时间。

4.JavaScript (ES6) code snippets

        支持ES6语法提示

5.Mithril Emmet

        一个能大幅度提高前端开发效率的一个工具,用于补全代码

6.Path Intellisense

        路径提示插件

7.Vue 3 Snippets

        在Vue 2或者Vue 3开发中提供代码片段,语法高亮和格式化的VS Code插件,能极大提高开发效率。

8.VueHelper

        VS Code最好的vue代码提示插件,不仅包括了vue2所有api,还含有vue-router2和vuex2的代码

9.Auto Close Tag

        自动闭合HTML/XML标签

10.Auto Rename Tag

        自动完成另一侧标签的同步修改

11.Beautify

        格式化html、js、css

        安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。(因为已禁用)

12.Bracket Pair Colorizer

        给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

        安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。(因为已禁用)

13.open in browser

        VS Code不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

14.Vetur

        Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,

debugger。 VS Code官方钦定Vue插件,Vue开发者必备。

15.File Utils

        File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

16.IntelliJ IDEA Keybindings

        安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

5.1.4 VS Code 配置

        打开配置面板,根据自己的喜好,可以修改字体、背景样式等偏好设置

举报

相关推荐

0 条评论