当前位置： 首页 > news >正文

VSCode Vue 开发环境配置

news 2026/2/7 19:05:34

Vue是前端开发中的重要工具与框架，可以保住开发者高效构建用户界面。

Vue2官方文档：https://v2.cn.vuejs.org/
Vue3官方文档：https://cn.vuejs.org/

Vue的安装和引用

Vue2的官方安装指南：https://v2.cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述
可以下载到本地，也可以使用在线版本，两种方式都是使用<script>引用，对于本地引用，在src中填写下载的本地文件的地址，对于在线引用，则直接按照官网提供的代码引用。

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

在开发阶段，推荐使用开发版本，包含完整的警告和调试模式，有利于开发和debug。在开发完成后再换成更简洁精悍的生产版本投入使用。

VSCode配置

插件：view-in-browser
在这里插入图片描述
插件安装完成后，右键html文件并点击View in Browser即可在浏览器中预览编写的网页。
在这里插入图片描述
插件：Vue Language Features (Volar)
在这里插入图片描述
用于Vue的代码高亮。

Hello World

一个简单的html实例，用<script>引用Vue，之后创建Vue实例并将html中的组件挂载到Vue实例的el属性下，由Vue实例的data属性为组件提供数据。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><div id="box">{{msg}}</div><!-- 创建实例 --><script>const app = new Vue({el:"#box",  // el指定该Vue管理的实例data:{  // data为实例提供数据msg: "hello world"}})</script>
</body>
</html>

完成编辑后在浏览器中打开，即可看到对应文本。
在这里插入图片描述

浏览器开发者插件

在浏览器端也有Vue专属的开发者插件可以安装，方便开发者直接在浏览器对网页进行调试。
在这里插入图片描述
完整的安装教程可以查看这篇博客，在谷歌浏览器上的安装方法类似。安装完后可以在F12页面通过该插件直接编辑Vue实例中的data。

在这里插入图片描述

相关文章：

VSCode Vue 开发环境配置

Vue是前端开发中的重要工具与框架&#xff0c;可以保住开发者高效构建用户界面。 Vue2官方文档&#xff1a;https://v2.cn.vuejs.org/ Vue3官方文档&#xff1a;https://cn.vuejs.org/ Vue的安装和引用 Vue2的官方安装指南&#xff1a;https://v2.cn.vuejs.org/v2/guide/ins…...

编程日记 2023/12/5 7:07:01

clickhouse从mysql同步数据到clickhouse的几种方式

背景 我们的业务数据一般来说都是放在Mysql中的&#xff0c;而我们要分析的数据一般都存放在clickhouse中&#xff0c;所以如何把数据从mysql同步到ck&#xff0c;就变成了一个必须的步骤&#xff0c;本文简单记录下几种同步的方式 mysql数据同步到clickhouse 方式一&#x…...

编程日记 2023/12/5 7:02:57

“滑动窗口”算法实例

1 问题 给定一个字符串“S”&#xff0c;找出其中不含有重复字符的最长子串的长度。例如&#xff1a;S‘ABCABCBB’&#xff0c;则不含重复字符的最长字串长度为3.。S‘ABCDFG’,则不含重复字符的最长字串长度为6。要求设计一个Python程序实现该功能&#xff1f; 2 方法 按照一…...

编程日记 2023/12/5 7:00:56

分布式搜索引擎elasticsearch(一）

5.1 初始elasticsearch elasticsearch是一款非常强大的开源搜索引擎，可以帮助我们从海量数据中快速找到需要的内容。 elasticsearch是elastic stack的核心，负责存储、搜索、分析数据。 5.1.1正向索引 5.1.2elasticsearch采用倒排索引： 文档（document）：每条数据就是一个…...

编程日记 2023/12/5 6:59:55

PTA 7-236 验证哥德巴赫猜想

哥德巴赫猜想之一是指一个偶数&#xff08;2除外&#xff09;可以拆分为两个素数之和。请验证这个猜想。 因为同一个偶数可能可以拆分为不同的素数对之和&#xff0c;这里要求结果素数对彼此最接近。 输入格式: 首先输入一个正整数T&#xff0c;表示测试数据的组数&#xff0…...

编程日记 2023/12/5 6:54:50

微信小程序 纯css画仪表盘

刚看到设计稿的时候第一时间想到的就是用canvas来做这个仪表盘&#xff0c;虽然本人的画布用的不是很好但还可以写一写&#x1f600;。话不多说直接上代码。最后有纯css方法 <!--wxml--> <canvas canvas-id"circle" class"circle" >// js dat…...

编程日记 2023/12/5 6:52:49

成为AI产品经理——模型稳定性评估（PSI）

一、PSI作用 稳定性是指模型性能的稳定程度。 上线前需要进行模型的稳定性评估&#xff0c;是否达到上线标准。 上线后需要进行模型的稳定性的观测&#xff0c;判断模型是否需要迭代。 稳定度指标(population stability index ,PSI)。通过PSI指标&#xff0c;我们可以获得不…...

编程日记 2023/12/5 6:50:47

操作系统——进程同步

目录 一、信号量相关函数 1. 创建信号量集 2. 获取信号量集 3. 等待、通知信号量集 4. 控制信号量集 二、简单进程同步 1. 创建信号量集 2. P操作 3. V操作 4. 删除信号量集 5. 测试&#xff1a; 三、生产者与消费者 1. 创建、删除共享内存及信号量集 2. 单一生产…...

编程日记 2023/12/5 6:41:39

如何能够对使用ShaderGraph开发的Shader使用SetTextureOffset和SetTextureScale方法

假设在ShaderGraph中的纹理的引用名称为"_BaseMap"&#xff0c;同时对这个"_BaseMap"纹理使用了采样的节点"SampleTexture2D"&#xff0c;然后该采样节点的uv接入的TilingAndOffset节点&#xff0c;此时的关键步骤是新建一个Vector4属性&#xf…...

编程日记 2023/12/5 6:39:38

力扣572：另一棵树的子树

力扣572&#xff1a;另一棵树的子树 给你两棵二叉树 root 和 subRoot 。检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所…...

编程日记 2023/12/5 6:38:37

Linux系统中进程间通信（Inter-Process Communication, IPC）

文章目录 进程间通信介绍进程间通信目的进程间通信发展 管道什么是管道 匿名管道用fork来共享管道原理站在文件描述符角度-深度理解管道站在内核角度-管道本质管道读写规则管道特点 命名管道创建一个命名管道匿名管道与命名管道的区别命名管道的打开规则 命名管道的删除用命名管…...

编程日记 2023/12/5 6:37:36

【React + Typescript】使用WebPack包管理、各种扩展插件组成的初始模板，开源协议：CC-BY-4.0

React Typescript Webpack 模板 模板展示项目结构使用的部分扩展包页面配置代码Layout 公共容器组件路由Jspackage.json 开源模板下载TIP 模板展示 项目结构 使用的部分扩展包 &#x1f4c2; System ├── &#x1f4c2; Plugin │ ├── &#x1f4c4; file-loader | 在处…...

编程日记 2023/12/5 6:36:35

python 制作3d立体隐藏图

生成文件的3d图&#xff0c;例子&#xff1a; 文字&#xff1a; 隐藏图&#xff1a; 使用建议&#xff1a; &#xff11;、建议不用中文&#xff0c;因为中文太复杂&#xff0c;生成立体图效果不好。 &#xff12;、需要指定FONT_PATH&#xff0c;为一个ttf文件&#xff0c;…...

编程日记 2023/12/5 6:35:34

layui+ssm实现数据批量删除

layuissm实现数据的批量删除 //数据表格table.render({id: adminList,elem: #adminList,url: ctx "/admin/getAdminList", //数据接口cellMinWidth: 80,even: true,toolbar: #toolbarDemo,//头部工具栏limit: 10,//每页条数limits: [10, 20, 30, 40],defaultToolba…...

编程日记 2023/12/5 6:34:33

国产AI边缘计算盒子，双核心A55丨2.5Tops算力

边缘计算盒子 双核心A55丨2.5Tops算力 ● 2.5TopsINT8算力&#xff0c;支持INT8/INT4/FP16多精度混合量化。 ● 4路以上1080p30fps视频编解码&#xff0c;IVE模块独立提供图像基础算子加速。 ● 支持Caffe、ONNX/PyTorch深度学习框架&#xff0c;提供resnet50、yolov5等AI算…...

编程日记 2023/12/5 6:33:32

C++作业4

代码整理&#xff0c; 将学过的三种运算符重载&#xff0c;每个至少实现一个运算符的重载 代码&#xff1a; #include <iostream>using namespace std;class Stu {friend const Stu operator*(const Stu &L,const Stu &R);friend bool operator<(const Stu …...

编程日记 2023/12/5 6:31:31

计算机网络（二）| 物理层上 | 数据通信基础知识 调制 频率范围 信噪比

文章目录 1 物理层基本概念2.数据通信基础知识2.1 数据通信基本概念2.2 信道基本概念2.2.1 基带调制&#xff08;编码&#xff09;方式2.2.2 带通调制方式 2.3 信道的极限速率影响因素2.3.1 **频率范围**2.3.2 **信噪比** 内容笔记来源于谢希任老师《计算机网络》 物理层重点 …...

编程日记 2023/12/5 6:30:30

[STM32-1.点灯大师上线】

学习了江协科技的前4课&#xff0c;除了打开套件的第一秒是开心的&#xff0c;后面的时间都是在骂娘。因为51的基础已经几乎忘干净&#xff0c;c语言已经还给谭浩强&#xff0c;模电数电还有点底子&#xff0c;硬着头皮上吧。 本篇主要是讲述学习点灯的过程和疑惑解释。 1.工…...

编程日记 2023/12/5 6:27:27

Web测试自动化工具Selenium的使用

Web测试自动化工具Selenium的使用 Selenium是一个Web应用测试的自动化工具&#xff0c;它通过模拟点击实现对Web应用的功能测试。测试时&#xff0c;除了Selenium&#xff0c;还需要对应的浏览器驱动&#xff0c;如在Chrome实现自动点击&#xff0c;则需要chromedriver。 Sel…...

编程日记 2023/12/5 6:25:25

VUE2+THREE.JS 按照行动轨迹移动人物模型并相机视角跟随人物

按照行动轨迹移动人物模型并相机视角跟随人物 1. 初始化加载模型2. 开始移动模型3. 人物模型启动4. 暂停模型移动5. 重置模型位置6. 切换区域动画7. 摄像机追踪模型8. 移动模型位置9.动画执行 人物按照上一篇博客所设定的关键点位置&#xff0c;匀速移动 1. 初始化加载模型 //…...

编程日记 2023/12/5 6:23:24

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2026/1/31 11:58:35

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

编程新知 2026/2/6 6:25:09

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/8/17 3:31:21

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

编程新知 2025/11/23 13:02:26

6.计算机网络核心知识点精要手册

计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法&#xff1a;数据与控制信息的结构或格式&#xff0c;如同语言中的语法规则语义&#xff1a;控制信息的具体含义和响应方式&#xff0c;规定通信双方"说什么"同步&#xff1a;事件执行的顺序与时序…...

编程新知 2025/9/26 21:47:06