使用VS Code运行前端代码

优质文章学习记录

— 3 min read
使用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

HarmonyOS NEXT开发进阶（二十三）：多端原生App中通过WebView嵌套Web应用实现机制

HarmonyOS NEXT开发进阶（二十三）：多端原生App中通过WebView嵌套Web应用实现机制

文章目录 * 一、前言 * 二、 Android * 三、 iOS & iPadOS * 四、鸿蒙 * 4.1 核心机制：自研框架 + 开源内核 * 4.2 与 AOSP/Android WebView 的本质区别 * 4.3 技术特点与优势 * 4.4 开发视角 * 五、总结 一、前言 简单来说，在原生App中通过WebView嵌套的Web应用，所使用的浏览器并不是我们通常理解的独立App（如Chrome、Safari），而是由操作系统提供的、专门嵌入应用内部的“浏览器渲染引擎”。 这个引擎通常与系统自带的完整浏览器共享核心，但运行环境、权限和能力有所不同。 以下是各个平台的详细情况： 二、 Android * 名称/内核： Android

亲测Qwen3Guard-Gen-WEB，内容风险识别真实体验分享

亲测Qwen3Guard-Gen-WEB，内容风险识别真实体验分享 最近在做AI应用安全加固时，偶然接触到阿里开源的 Qwen3Guard-Gen-WEB 镜像。它不像常规大模型那样生成文案或画图，而是专为“看住内容”而生——不输出创意，只输出判断；不追求惊艳，只专注可靠。部署后我连续测试了三天，输入了200+条涵盖中文、英文、粤语、网络黑话、隐喻表达、对抗提问的真实文本，从“怎么修手机”到“如何绕过实名制”，从学生作业提问到营销话术草稿，全程记录响应逻辑、速度和边界表现。这篇不是参数罗列，也不是复述文档，而是一份带着键盘温度、留有思考痕迹、甚至包含翻车现场的真实体验手记。 1. 它到底是什么？一个会“说人话”的安全守门员 Qwen3Guard-Gen-WEB 是 Qwen3Guard-Gen-8B 模型的轻量级Web封装版本，由阿里开源，核心目标非常明确：对任意文本做三级安全判定，并用自然语言解释为什么。 它不是传统意义上的“审核API”，没有返回一堆JSON字段和概率值；
前端Vibe Coding

前端Vibe Coding

一、打破认知：Vibe Coding不是“摸鱼”，是前端开发的效率革命 1.1 核心定义与起源 Vibe Coding（氛围编程）是由Andrej Karpathy于2025年2月提出的AI驱动开发范式，核心是“自然语言描述需求，AI生成实现，人类聚焦创意与决策” 的协作模式。它并非简单的代码生成工具，而是对前端开发流程的重构——将开发者从CSS调试、重复组件编写等机械劳动中解放，专注于UI交互设计、用户体验优化等创造性工作。 与传统开发的本质区别在于： • 传统前端开发：手动编写90%代码 + 10%创意决策 • Vibe Coding：AI实现70%基础代码 + 30%核心创意+审查优化 1.2 为什么前端最适合Vibe Coding？ 前端开发的特性与Vibe Coding的优势高度契合： • 组件化天然适配：UI组件（按钮、卡片、表单）具有强复用性，
【DataX篇】DataX的两种部署方式以及DataX-Web可视化管理平台的搭建

【DataX篇】DataX的两种部署方式以及DataX-Web可视化管理平台的搭建

💫《博主主页》： 🔎 ZEEKLOG主页：奈斯DB 🔎 IF Club社区主页：奈斯、 🔎 微信公众号：奈斯DB 🔥《擅长领域》： 🗃️ 数据库：阿里云AnalyticDB(云原生分布式数据仓库)、Oracle、MySQL、SQLserver、NoSQL(Redis) 🛠️ 运维平台与工具：Prometheus监控、DataX离线异构同步工具 💖如果觉得文章对你有所帮助，欢迎点赞收藏加关注💖     这篇文章将系统的分享 DataX 的安装部署实践，详细拆解DataX的两种核心部署方式——二进制部署与源码编译部署，并深入探讨动态参数配置、并发度优化等关键调优技巧。🎯     在此基础上，也将进一步介绍如何集成 DataX-Web可视化管控平台 ，以构建一个具备 统一调度、实时监控与高效管理 能力的企业级数据同步运维体系。🚀     DataX二进制、源码安装部署的 Github 地址： https://github.com/alibaba/DataX/blob/master/userGuid.md     DataX-Web二进制、