TDL的个人笔记

切换主题

前端入门：工具与基础 ​

喂饭级别的教程文档 ​

谁适合阅读本教程 ​

如果你是一个设计师、产品经理、UI，你不懂如何快速构建代码，那么本教程非常适合你。

学习本教程之前你需要了解 ​

在继续本教程之前，你应该了解一些基本的计算机编程术语。

如果你学习过 html、css、Javascript、Python 等编程语言，将有助于你更快的了解

Vibe Coding编程。

什么是GUI ​

什么是CLI ​

什么是目录 ​

前置条件 ​

  1. 软件：vscode
    1. 安装地址：https://code.visualstudio.com/
  2. 插件：腾讯云代码助手 CodeBuddy
    1. 安装地址：https://copilot.tencent.com/setup/
  3. 环境：Node.js环境
    1. 安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

构建工具 vite ​

vite是什么 ​

Vite（法语意为"快速"）是一个现代化的前端构建工具和开发服务器，由 Vue.js 作者尤雨溪创建，现已支持所有主流框架。

vite怎么用 ​

# 使用官方脚手架
npm create vite@latest

# 或直接指定项目名和模板
npm create vite@latest my-app -- --template react-ts

vite推荐用法 ​

# 标准创建（新建文件夹）
pnpm create vite@latest my-app -- --template react-ts

# 在当前目录直接创建（推荐，避免多层嵌套）
pnpm create vite@latest . -- --template react-ts

cd my-app
pnpm install
pnpm dev   # 启动，热更新几乎瞬间

前端框架 React Router ​

React Router是什么 ​

React Router​ 是 React 应用最流行的客户端路由库，用于在单页面应用（SPA）中实现页面导航和路由功能。

React Router怎么用 ​

# 安装 React Router v6
npm install react-router-dom
# 或
yarn add react-router-dom
# 或
pnpm add react-router-dom

React Router 官方快速创建 ​

bash
pnpm create react-router@latest