使用VS Code运行前端代码

使用VS Code运行前端代码

文章目录


VS Code运行HTML文件

提示:这里可以添加本文要记录的大概内容:

但是我在使用VS Code和Hbuilder的不同是:

Hbuilder我记得是可以在菜单栏的“文件”→“新建”→“HTML5+项目”,填写项目名称、路径等信息后点击“完成”即可创建一个新项目

一、安装VS Code 配置插件

如何使用VS Code安装插件及VS Code上的常用插件点我查看

以前写HTML用的是Hbuilder,最近突然发现VS Code也不错,只需要安装open in browser插件即可

在这里插入图片描述

二、在电脑上新建文件夹

VS Code使用是在本地打开一个文件夹

先在电脑上新建个文件夹

在这里插入图片描述


打开VS Code
然后选择【文件】→【打开文件夹】,找到刚才新建的文件夹

在这里插入图片描述

随后点开该文件夹,再次右键选择【新建文件夹】
目的:做好文件分类

在这里插入图片描述

三、新建文件【名字.html】

然后要再右键新建文件【名字.html】使用
html文件图标会变成:<>
css文件图标会变成:#

请添加图片描述

四、运行.html文件

进入页面输入:html:5回车,我们大部分代码是写在body标签下的
下面是个简单的HTML页面展示:

在这里插入图片描述

在文件里面还有个自动保存代码的功能

在这里插入图片描述

VS Code运行VUE代码

Vue-cli脚手架

Read more

【保姆级教程】AI图生图+视频生成完整工作流(附提示词+参数表)

【保姆级教程】AI图生图+视频生成完整工作流(附提示词+参数表)

【保姆级教程】AI图生图+视频生成完整工作流(附提示词+参数表) 目录 * 一、前言 * 二、环境搭建与工具选择 * 三、第一步:生成高质量基础图片(图生图) * 3.1 模型选择 * 3.2 提示词编写 * 3.3 参数设置参考 * 四、第二步:图生视频核心操作 * 4.1 AnimateDiff插件安装与配置 * 4.2 运动参数详解 * 4.3 生成视频与后处理 * 五、实战案例与提示词解析 * 六、常见问题与解决方案(避坑指南) * 七、资源下载 * 八、结语 一、前言 最近AI视频生成技术火得一塌糊涂,从Runway Gen-2到Stable Diffusion的AnimateDiff插件,

AI时代人人都是产品经理:能力边界:AI 能做什么、不能做什么?产品经理必须摸清的技术边界

AI时代人人都是产品经理:能力边界:AI 能做什么、不能做什么?产品经理必须摸清的技术边界

为什么要先搞懂AI的能力边界? 在AI工具遍地开花的今天,很多产品经理陷入了两个极端:要么过度迷信AI,认为它能解决所有问题;要么对AI充满恐惧,担心自己的岗位被替代。但现实是:AI不是产品经理的竞争对手,而是需要你掌握的核心工具。 搞懂AI的能力边界,本质是帮你: 1. 避免在需求评审会上提出技术上不可能实现的需求 2. 精准判断哪些工作可以交给AI提效,哪些必须自己亲力亲为 3. 利用AI的能力边界,设计出更有竞争力的产品方案 4. 建立和技术团队平等对话的技术认知基础 AI能做什么?6类产品经理必用的AI能力 1. 结构化信息处理:批量处理重复工作 AI最擅长处理有明确规则、结构化、重复性的任务,这些工作往往占据了产品经理30%以上的时间: * 自动整理用户调研数据,提炼高频需求关键词 * 批量生成产品文档的初始版本,如需求说明、接口文档 * 分析用户行为日志,输出标准化的行为路径报告 实战示例:用AI批量生成PRD需求条目 from openai import OpenAI client = OpenAI(api_key="

AI 进化论:从 Function Calling 到 MCP

AI 进化论:从 Function Calling 到 MCP

AI 进化论:从 Function Calling 到 MCP,你的大模型还在“裸奔”吗? 文章目录 * AI 进化论:从 Function Calling 到 MCP,你的大模型还在“裸奔”吗? * 一、 给 AI 装上手脚:Function Calling 到底是个啥? * 1. 专业解释与大白话解读 * 2. 核心功能与代码示例 * 二、 实战演练:搭建你的“门票数据助手” * 1. 业务场景介绍 * 2. 进阶:一次调用,搞定查询 + 可视化 * 三、 MCP:AI 界的“USB-C”接口协议来了! * 1.

腾讯突然出手!QClaw 内测上线:用微信就能操控电脑,对标 OpenClaw 的 AI Agent 它来啦

腾讯突然出手!QClaw 内测上线:用微信就能操控电脑,对标 OpenClaw 的 AI Agent 它来啦

从 OpenClaw 爆火开始,各种 “Claw” 系 AI Agent 产品正在快速出现。AI 不再只是聊天,而是开始真正帮人干活。 就在这波浪潮中,腾讯也出手了。 腾讯电脑管家团队推出了一款新的 AI Agent 工具 —— QClaw。 简单理解一句话: 让 AI 直接帮你操作电脑。 官网:https://claw.guanjia.qq.com/ AI 可以直接操控你的电脑 和普通 AI 助手不同,QClaw 的核心能力是 执行任务。 例如: * 自动整理文件 * 打开软件 * 运行脚本 * 执行办公流程 更有意思的是,QClaw 可以通过微信控制电脑。 只需要: 1️⃣ 安装 QClaw 客户端