新手AI前端编程核心概念 + 最佳实践 • 仙人掌主题

什么是前端？

这一篇教程我们来理解什么是前端？

这篇教程不会讲任何关于前端编程语言相关的语法知识，我们只是讲一些核心的前端概念，如果不了解这些概念，那么你在使用相关的工具的时候可能会踩很多坑

例如如果你不知道什么是样式，什么是框架和组件，那么你可能很难和AI沟通，也不明白AI在说些什么。但是一旦你了解了这些相关的概念。那么就能更好地使用AI，提出更精准的问题！

简单的说：前端就是你在浏览器中直接看到并与之互动的部分，比如按钮、图片、文字和动画等。它主要由HTML、CSS和JavaScript构成，负责将网站或应用的内容展示得漂亮、布局合理，并且响应你的操作，与后端的数据和业务逻辑进行交互。

前端在哪些应用场景中出现？

1. 网站

网站是最常见的前端应用。无论是企业官网、电商平台还是博客论坛，前端都负责页面的结构、样式以及与用户的互动。当你在浏览器中输入网址访问网站时，实际上就加载了前端代码，这些代码决定了页面的布局和动态效果。

2. 小程序

小程序是国内的一种特的前端展示，例如微信小程序、支付宝小程序等。这些应用同样运行在专用的“浏览器”或容器中。因为开发语言和展示方式与网站H5类似，也归属于前端范畴。

3. 浏览器插件

浏览器插件也是前端技术的一个重要场景。它们直接嵌入到浏览器中，为用户提供额外的功能和自定义体验，比如广告拦截、主题色修改以及各种工具扩展等。

客户端vs前端？

那么大家可能会想，我们平时开发手机上的应用。例如iOS应用和安卓应用那是属于前端吗？

这边直接给大家一个结论：它我们平时说前端只是指网站、小程序、浏览器插件的开发。

iOS应用和安卓应用一般我们叫它客户端。

详细的区分主要是按照所使用的技术进行区分的，还有更多端的说法可参考：

•前端：专指那些运行在浏览器或小程序容器中的代码，即网站、小程序、浏览器插件等，并且主要依赖于HTML、CSS和JavaScript这这三大技术栈。

• 客户端：iOS/Android/鸿蒙这些平台开发的应用是原生客户端应用，主要使用 Swift/Objective-C （iOS）或 Kotlin/Java （Android）进行开发，虽然它们也涉及界面，但通常不属于前端的范畴。

• 桌面端：Windows或者MacOS上的应用开发，我们叫它桌面端。

•大前端：同时包含前端+客户端+桌面端，你可以说它是大前端

小提示：理论上来说，你学会了前端的3个技术（HTML/CSS/JavaScript）之后，可以客户端和桌面端。

前端最重要的三个技术

在前端开发中，有三项基础技术是每个开发者必须掌握的：HTML、CSS和JavaScript。

它们分别承担着不同的角色，协同构成了现代前端开发的核心。虽然目前AI可以很方便地帮我们编写代码，但是你最起码得清楚它们分别是什么！

HTML— 网站的骨架

HTML（超文本标记语言，HyperText Markup Language）负责定义网页的基本结构和内容。你可以把 HTML想象成是网页的“骨架”，它提供了所有内容的基本框架，比如文本、图片、链接、按钮等。

• 基本概念：使用各种标签来描述网页的不同部分。

• 主要作用：定义网页所有的元素和结构，帮助浏览器解析并显示页面内容。

• 示例：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这里是一个简单的HTML示例。</p>
  </body>
</html>

CSS一让网页更美观

CSS（层叠样式表，Cascading Style Sheets）主要用于为HTML结构添加样式。可以把 css 看作是给网页搭配衣服，它使得静态的HTML内容变得美观和有吸引力，同时也负责页面的布局和响应式设计。

•基本概念：通过选择器（如标签选择器、类选择器、ID选择器）为HTML中的元素设置颜色、字体、间距、布局以及动画效果等一系列样式，CSS的代码写在style标签中。

•主要作用：美化网页，让网站在各种设备上都能星现一致而吸引人的视觉效果。

•示例：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>美化网页的示例</title>
    <style>
      body {
        background-color: #f5f5f5;
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      h1 {
        color: #333;
      }
      p {
        color: #666;
        line-height: 1.6;
      }
    </style>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用CSS美化的网页示例。</p>
  </body>
</html>

JavaScript — 给网页加上交互

JavaScript 是一门编程语言，它使得网页具备交互性和动态效果。通过 JavaScript，能够响应用户点击、输入、滚动等行为，使网页不再是静态的，而是充满生命力和互动性。

• 基本概念：JavaScript 是一门功能强大的脚本语言，支持变量、函数、条件语句、循环以及各种数据结构和编程范式。JavaScript的代码写在＜script>标签中。

• 主要作用：提供动态效果和交互功能，如表单校验、数据实时加载、动画效果等，以及与后端服务器交互数据。

•示例：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>动态网页示例</title>
  </head>
  <body>
    <button id="myButton">点击我</button>
    <script>
      document.getElementById('myButton').addEventListener('click', function() {
        alert('按钮被点击了！');
      });
    </script>
  </body>
</html>

扩展说明：

除了在浏览器中运行外，借助 Node.js,JavaScript 还可以用于后端开发，实现全栈 JavaScript 开发。所以从理论上来说，学习了JavaScript，你可以不用学习其他编程语言了。

前端最重要的两个网站：GitHub & npm

在前端开发中，GitHub 和 npm 是两个必不可少的平台。它们不仅是新手探索前端领域的重要入口，更是专业开发者构建、分享和复用代码的核心基地。尤其在Al 时代，通过这两个平台，我们可以更高效、更合理地找到自己需要的模板、框架、SDK 以及库，从而加速应用的开发。

GitHub — 开源代码集散地

什么是 GitHub？

GitHub 是目前世界上最大的代码托管和协作平台。无论你是刚入门的小白，还是经验丰富的开发者，都可以在GitHub上找到成千上万的开源项目和资源。

GitHub 的主要作用

• 分享与协作：开发者可以在GitHub上托管代码，与世界各地的程序员共同协作，不断迭代和完善项目。

• 模板和 boilerplate 资源：很多优秀的项目早已整理出标准化的模板或脚手架（boilerplate），帮助新手从零开始构建网站或应用。

•学习和启发：通过浏览和参与开源项目，你可以学习到先进的开发理念、架构设计以及实践经验。

GitHub 的优势

• 社区力量：全球活跃的开发者社区不断为项目贡献代码、文档和经验。

• 代码安全和版本管理：借助 GitHub 的版本控制系统，开发者可以跟踪代码变更，轻松管理更新和问题修复。

• 工具生态：Github拥有很多的工具生态，例如你如果把你的代码在Github托管，可以使用Vercel轻松部署项目。

npm —前端库与依赖管理的仓库

什么是 npm？

npm（Node Package Manager）不仅是Node.js 的包管理工具，更是全世界最大的 JavaScript 库和工具的仓库。通过 npm，我们可以快速下载并集成各种功能完善的工具库和框架，从而大大降低开发门槛。

npm 的主要作用

• 依赖管理：帮助开发者管理项目中各种第三方库和模块，确保版本一致和依赖正确。

• 丰富的资源库：不仅包含前端框架（如 React、 Vue 等）的官方包，也囊括了许多辅助开发的小工具和插件。

• 快速原型开发：通过 npm，可以轻松集成已有的解决方案，加速从想法到产品的转换。

npm 的优势

• 便捷的安装与更新：借助 npm 命令，可以快速安装所需的包，并自动处理包之间的依赖关系。常用的两个命令如下：

npm install：安装项目的依赖

npm run dev：运行起来项目

• 生态系统完善：依托于庞大的社区和不断更新的资源库，无论你需要UI 组件、数据处理工具还是开发辅助工具，都可以在 npm 中找到。

用好AI编写前端必备的4个概念

在 AI 时代，编程更多的是将现有的优秀资源合理地进行组合，而不是从零开始写代码。

对于没有编程基础的新手而言，掌握这4个概念能够让你更好的和AI进行沟通，并且从 Github和npm上找到和使用你想要的工具。

1. 框架（Framework）

框架是一种预先定义好的开发结构，它为你构建应用提供了基础模板和运行规则。常见的前端框架有 React/Next.js 以及 Vue/Nuxt.js。

• Nextjs（最为推荐的框架，AI友好＋生态丰富合）

• Nuxt.js（较为推荐，Vue的语法对新手友好）

在使用框架时，通常需要关注以下两个重要概念：

•页面（Page）页面代表应用中的一个独立界面或路由。例如，一个电商网站可能会有首页、产品详情页和购物车等不同页面。框架通常内置路由管理，帮助你轻松管理各个页面之间的导航和状态。

• 组件（Component）组件是页面的基本构建单元，是可重复使用的UJI 模块。无论是按钮、输入框，还是整个导航栏，都可以被看作组件。组件化结构不仅提高了开发效率，还使得代码更易维护和扩展。

2. 模板（Template/Boilerplate）

模板或脚手架是一份预先配置好的框架代码+业务代码。它通常包含了项目的目录结构、配置文件、常用依赖以及某个业务的基础代码。比如你可以选取一个博客的模板修改成为自己的博客，或者可以选择一个导航站的模板修改成为自己的导航站。

Github上有许多开源免费的模板，Next.js和Nuxt.js官方也有很多免费的模板：

• Next.js Template

• Nuxt.js Template

模板的作用：

•快速建立项目，节省环境搭建和配置的时间。

• 提供最佳实践和统一的编码风格。

• 上手就可以用的UI样式。

•降低新手的学习曲线，让你专注于业务逻辑而不是底层配置。

3. SDK

SDK （Software Development Kit，软件开发工具包）是一组用于构建应用的工具和资源的集合。一个 SDK 通常包含：

• API（应用程序接口）提供标准化的调用接口，让你可以方便地使用某项服务或技术，而不需关心底层的买现细节。

• 文档和示例代码帮助你了解如何集成和使用这些 API 以及最佳实践。

• 工具和库用于简化开发流程，比如调试工具、测试环境和代码生成器。

在 AI 开发中的作用：目前很多 AI服务都提供了专门的SDK。通过集成SDK，你可以快速为你的应用加上AI能力，而不必从零开发复杂的算法和服务。例如OpenAI就提供了 Node.js和Python的SDK.

4. 库（Library）

库是一组预先编写好的、可重用的代码集合，用于解决特定问题。与框架不同，库通常不规定整个项目的结构，而是专注于提供某项功能或算法的实现。

作用：

• 简化代码：通过调用库中的函数，你可以轻松实现复杂的功能。

• 提高效率：避免重复造轮子，利用别人已经写好的、经过检验的代码。

• 灵活性高：你可以根据需要选择和替换不同的库，而无需受到整个项目框架的限制。

举例：在前端开发中，可能会使用图形库（例如echarts.js）来实现数据可视化，或使用日期处理库（moment.js）来简化时间计算。选择合适的库，可以让你的开发工作更专注于业务需求，而不必关注基础逻辑的实现。

AI时代新手开发的最佳实践

在AI时代，快速、高效地搭建应用程序已成为大势所趋。对于新手而言，最聪明的做法就是从已有的框架或模板开始，而不是从零开始构建项目。下面介绍一种实践流程，可以大幅提升开发效率和降低入门难度。

1. 选择合适的框架或模板

• 直接获取模板

如果你已经确定了你的开发方向，可以直接访问像 Next.js 或 Nuxt.js 这样的框架官网。

这些官网通常提供经过整理的项目模板，让你能够一键下载并开始开发。此外，你也可以在 GitHub 上搜索免费的 template 或 boilerplate。这些模板经过社区验证，通常不仅包含了基础项目结构，还整合了最佳实践和常见功能。

• 购买付费模板

如果开源模板满足不了你的复杂需求，也可以考虑购买商业模板。付费模板一般会提供更专业的设计、更完善的文档以及长期维护支持，适用于中大型项目的快速启动。https://saasboilerplates.dev/这个网站有许多优秀的付费模板。

2. bolt.new自定义模板（现有模板不满足需求时）

有时，无论是免费模板还是付费模板，都可能无法完美匹配你的具体项目需求，而且因为可能模板太复杂，让你修改的成本很高。这个时候推荐使用一个非常实用的工具 bolt.new.

使用 bolt.new bolt.new 支持通过自然语言对话生成一套自定义模板。你只需告诉它你的需求，例如你希望开发一个瑜伽老师的个人网站。bolt.new 就可以根据描述自动生成满足需求的项目起始代码。这一方式不仅省去了繁琐的环境配置过程，还能让最终的模板更加贴合项目本身。

3. 利用 Cursor 搭建和开发项目

完成模板选择或生成后，接下来的工作重点就是利用 Cursor 进行项目开发：

• Cursor 的作用 Cursor 是一个智能开发工具，可以帮助你快速编写、调试和修改代码。借助 Cursor，你可以在模板基础上加入个性化内容、扩展功能或进行后续优化，同时享受 AI 智能补全和提示带来的便利。

• 开发流程简述:

。获取模板：先从官网、GitHub 或bolt.new 获取最适合的模板。

。导入模板：在 Cursor 中打开模板项目，并基于模板开始编写业务逻辑代码。

。智能迭代：借助 Cursor 的智能功能，不断迭代和完善项目，快速添加新组件、调试代码以及集成其他库和 SDK。

在 AI 时代，新手开发者应优先选择现成的模板或框架（如 Next.js、Nuxt.js），可以先访问官网或在 GitHub上找到免费的模板。如果现有资源无法满足需求，使用 bolt.new 通过自然语言定制模板是一个非常便捷的选择。而利用 Cursor 进行代码的编写与送代，则能让你充分发挥 AI工具的优势。

这种流程不仅节省了大量重复配置的时间，还保证了代码的规范和质量，是在快速迭代、灵活应对需求变化的现代开发中，最理想的实践方式。通过这种最佳实践，新手能迅速上手，从而更专注地实现创新功能和高质量应用。