当前位置:   article > 正文

谷粒商城实战笔记-28-前端基础-技术栈简介

谷粒商城实战笔记-28-前端基础-技术栈简介


本节的主要内容是介绍前端的技术栈。

谷粒商城项目是一个全栈项目,侧重于后端,但也有一定量的前端开发工作量。

好在只要具备JavaScript基础,学习这部分前端内容后,就能具备这个项目所需要的能力。

这部分的主要内容包括:

  • ① VSCode的使用
  • ② 开发语言ES6的学习
  • ③ Nodejs的学习
  • ④ Vue的学习
  • ⑤ Babel的学习
  • ⑥ webpack的学习

当然,以下是针对初学者的六个部分的扩写:

一,学习目标

前端的学习不是这个项目的重点,但是通过这个项目的学习,可以具备基本的前端开发能力,成为初级前端开发工程师。

下面是这个项目前端学习能达成的目标。

1,VSCode的使用

Visual Studio Code (VSCode) 是一款免费开源的代码编辑器,它轻量级但功能强大,非常适合前端开发。VSCode 提供了对多种编程语言的支持,包括语法高亮、智能代码补全、调试、Git集成等功能。对于初学者来说,你可以从以下几个方面开始学习:

  • 安装与设置:下载并安装VSCode,然后配置用户设置,比如调整字体大小、主题、快捷键等。
  • 插件安装:安装一些前端开发必备的插件,如Prettier用于代码格式化,Live Server可以实时预览HTML文件,以及ESLint帮助检查代码错误。
  • 工作区与项目管理:学会如何创建、打开和管理项目文件夹,以及如何在多个项目之间切换。
  • 调试技巧:了解如何使用VSCode的内置调试工具来逐步执行代码,设置断点,查看变量状态等。

2,开发语言ES6的学习目标

ECMAScript 6 (ES6) 是JavaScript语言的一个版本,引入了许多新的特性,极大地提高了编程效率和代码可读性。初学者应该掌握以下核心概念:

  • let 和 const:理解变量声明的区别,使用let声明局部变量,使用const声明常量。
  • 箭头函数:学习箭头函数的语法和使用场景,它们更简洁,自动绑定this
  • 模板字符串:使用反引号(`)创建包含表达式的字符串。
  • 解构赋值:快速提取数组或对象中的值。
  • :熟悉面向对象编程的概念,如继承、构造函数和原型链。
  • 模块导入与导出:学习如何在不同文件间共享代码。

3,Node.js的学习目标

Node.js 是一个基于Chrome V8引擎的JavaScript运行环境,使得在服务器端运行JavaScript成为可能。对于初学者,以下是一些关键点:

  • 安装与环境配置:安装Node.js并设置环境变量。
  • npm(Node Package Manager):学习如何使用npm来安装、更新和管理项目依赖。

4,Vue的学习目标

Vue.js 是一个用于构建用户界面的渐进式框架,它易于上手,同时又具有强大的灵活性。初学者应该关注:

  • 基本语法:理解Vue实例的生命周期,模板语法,如插值表达式({{ }})和指令(v-xxx)。
  • 组件化:学会如何定义和使用组件,以及组件之间的通信。
  • 状态管理:学习使用Vuex进行复杂状态的管理。
  • 路由与导航:使用Vue Router进行页面间的跳转和数据传递。,

5,Babel的学习目标

Babel 是一个编译器,可以将现代的JavaScript代码转换成浏览器和Node.js能够理解的代码。初学者需要知道:

  • 安装与配置:学习如何安装Babel并配置.babelrc文件。
  • 插件与预设:了解如何使用Babel插件和预设来转换特定的语法。
  • 编译过程:理解Babel的编译步骤,从源代码到目标代码的转换。
  • 与构建工具集成:学会如何将Babel集成到webpack或Gulp等构建工具中。

6,webpack的学习目标

webpack 是一个流行的前端资源加载和打包工具,可以优化和管理你的应用程序资源。初学者应该掌握:

  • 基本配置:理解webpack的入口、输出、加载器、插件和模式。
  • 热更新:掌握如何使用webpack-dev-server进行热模块替换(Hot Module Replacement,HMR)。

以上每个主题都是前端开发的重要组成部分,掌握它们将为你打下坚实的基础。

二,前后端技术栈的比较

为了加上对前端的认识,下面比较下前后端开发技术栈的异同。

前后端开发在流程上非常相似:

  • 需要专门的高级开发语言
  • 成熟的框架
  • 便利的开发工具
  • 开发完成以后都需要构建为特定的格式以便于部署
  • 可以进行工程化模块化的管理,且有相对应的管理工具

因为前后端内容的不同,导致具体到各个环节上,有非常明显的差异。如下图。

在这里插入图片描述

1. 开发语言

  • 前端:JavaScript是一种用于网页编程的语言,可以让网页具有动态效果和交互性。
  • 后端:Java是一种广泛使用的编程语言,常用于服务器端开发,可以处理大量数据和复杂的业务逻辑。

2. 框架:

  • 前端:JQuery是一个轻量级的库,可以帮助开发者更轻松地操作DOM元素;Vue和React则是两个流行的前端框架,它们提供了丰富的组件化能力,使得开发者能够快速构建复杂的应用程序。
  • 后端:Spring是一个开源的企业级应用框架,提供了一整套解决方案来简化企业级应用的开发;SpringMVC是Spring的一个模块,它为Web应用程序提供了模型视图控制器架构的支持。

3. 开发工具:

  • 前端:webstorm和vscode是两种常见的代码编辑器,可以帮助开发者编写、调试和运行代码。
  • 后端:idea和eclipse也是两种常用的代码编辑器,支持多种编程语言,提供了丰富的插件和功能。

4. 项目构建工具:

  • 前端:webpack和gulp是两种常用的前端构建工具,可以帮助开发者自动化构建过程,例如打包、压缩等。
  • 后端:maven和gradle是两种常用的项目构建工具,可以帮助开发者自动化构建过程,例如编译、测试、部署等。

5. 依赖管理工具:

  • 前端:npm是Node.js的包管理器,可以帮助开发者管理和安装第三方库。
  • 后端:maven是Java的包管理器,可以帮助开发者管理和安装第三方库。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小惠珠哦/article/detail/872799
推荐阅读
相关标签
  

闽ICP备14008679号