前端代码断点调试

搜索内容：前端

不知道你是否依然还在使用console.log(...)调试前端代码，显然这样做效率很低，所以是时候在前端代码调试中也使用断点的方式 debug 了。这里介绍如何在基于 Vue 的前端项目中使用 VSCode 进行断点调试。 VSCode 使用一个插件 JavaScript Debugger 进行前端代码调试，这个插件已经默认集成在较新版本的 VSCode 中。如果因为其它原因需要安装，可以自行安装：首先启动一个前端项目，比如： npm run uat 项目启动后会有一个端口号，比如： http://local…

2026年1月20日 0条评论 150点热度 0人点赞魔芋红茶阅读全文

准备工作创建项目创建项目： npm init vue@latest 相关选项如下：在src目录下添加以下目录：别名路径联想默认情况下在 VSCode 中输入import xxx from '@...'时不会启用路径联想功能，要启用需要在项目根目录下添加 VSCode 配置文件jsconfig.json： { "compilerOptions" : { "baseUrl" : "./", "paths" : { "@/*":["src/*"] } } } 如果 VSCode 已经自动创建该文件，可以跳过这一…

2025年6月9日 0条评论 473点热度 0人点赞魔芋红茶阅读全文

Pinia 是 Vue 的一个官方库，用于状态管理。 1.安装首先创建一个 Vue3 项目，具体方式可以参考这里。安装 Pinia： npm install pinia 创建一个 pinia 实例 (根 store) 并将其传递给应用： import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const pinia …

2025年6月9日 0条评论 322点热度 0人点赞魔芋红茶阅读全文

本文将学习一个示例项目（大事件）的前端搭建过程。 1.准备工作 1.1.创建工程创建一个名称为big-event的 Vue3 项目，具体可以参考这篇文章。 1.2.安装插件安装 ElementPlus： npm install element-plus --save 安装好后还需要在main.js中导入相关模块和样式： import './assets/main.scss' import { createApp } from 'vue' import ElementPlus from 'element-pl…

2025年6月9日 0条评论 423点热度 0人点赞魔芋红茶阅读全文

1.准备工作在使用 Element Plus 之前，需要先创建一个 Vue 工程，具体可以参考上一篇文章。创建好后就可以按照官方文档中的指示，在工程目录下安装 Element 依赖： npm install element-plus --save 注意，Element 和 Element Plus 是两个不同的项目，前者适用于 Vue 2.X，后者适用于 Vue 3.X。这里使用的是后者。 2.快速开始按照官方文档的指引，修改main.js的内容： import { createApp } from 'vue…

2025年6月9日 0条评论 641点热度 0人点赞魔芋红茶阅读全文

上一篇文章介绍了如何在单一 Html 页面中使用 Vue，本文介绍如何从头开始用 Vue 构建一个前端工程项目。 1.环境准备 Vue 框架代码的创建依赖于 Node.js，因此需要先安装 Node.js。 2.创建和启动 2.1.创建通过以下命令可以创建 Vue 的框架代码： npm create vue@latest 该命令执行后会先检查是否安装 create-vue 工具，如果没有，就安装。然后再使用 create-vue 创建框架代码。 npm（Node Package Manager）是 NodeJS …

2025年5月19日 0条评论 460点热度 0人点赞魔芋红茶阅读全文

Vue 是一个目前最流行的前端响应式框架，关于它的简单介绍可以观看这里。 1.快速入门 Vue 的官网提供一个快速上手指南，有多种方式可以安装和使用 Vue，这里展示一个最简单的方式——直接导入官方提供的在线的核心 JS 文件进行使用。这里展示的内容相当于官方快速上手指南中的使用 ES 模块构建版本。需要先像在之前文章中介绍的那样，在 JS 模块中导入 Vue 的createApp函数： <script type="module"> import { createApp } from "htt…

2025年5月19日 0条评论 462点热度 0人点赞魔芋红茶阅读全文

1.传统引用一般性的，用以下方式引入JS 中定义的函数或对象到 Html 中使用： function showMessage(){ console.log("hello"); } function showChineseMessage(){ console.log("你好"); } <html> <body> <h1> hello </h1> <button id="btn">按我有惊喜</button> …

2025年5月19日 0条评论 364点热度 0人点赞魔芋红茶阅读全文

下载代码通过官方仓库下载代码： git clone git@github.com:alibaba/nacos.git 基于特定版本进行二次开发，比如这里基于2.2.2进行开发，NACOS 使用 tag 标记不同版本的代码，所以可以切换到特定版本的代码： git checkout 2.2.2 基于这个版本创建本地分支进行开发： git switch -c my-2.2.2 项目前端 NACOS 的前端项目使用 REACT 构建。项目启动命令位于console-ui/package.json。启动项目： npm s…

2026年2月3日 0条评论 143点热度 0人点赞魔芋红茶阅读全文

路由器和路由新建一个 Vue3 项目，创建一个简单的 App.vue： <template> <div class="app"> <h2 class="title">Vue路由测试</h2>  <div class="navigate"> <a href="#" class="active">首页</a> <a href="#">新闻<…