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

VSCode Vue 开发环境配置

news 2026/3/27 8:09:31

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

一篇搞定2026年律所管理系统选购，避坑技巧+优质品牌全解析

据智研咨询2026年发布的《中国律所管理软件行业发展报告》显示&#xff0c;国内律所对管理系统的需求年增长率达28%&#xff0c;但近70%的律所表示选型后存在功能冗余、操作复杂、适配性差等问题&#xff0c;不仅未能提升效率&#xff0c;反而增加了办公成本。作为深耕律所管理…...

编程新知 2026/3/27 8:00:21

华为光猫配置解密工具技术架构解析与实现机制

华为光猫配置解密工具技术架构解析与实现机制 【免费下载链接】HuaWei-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/hu/HuaWei-Optical-Network-Terminal-Decoder 在网络设备运维领域&#xff0c;华为光猫配置文件的安全加密机制为设备…...

编程新知 2026/3/27 7:40:14

OpenClaw调试技巧：nanobot镜像的日志分析与问题定位

OpenClaw调试技巧&#xff1a;nanobot镜像的日志分析与问题定位 1. 为什么需要关注OpenClaw日志 上周我在本地部署nanobot镜像时遇到一个诡异现象&#xff1a;OpenClaw能正常接收飞书消息&#xff0c;但执行自动化任务时总在"思考阶段"卡住。这个问题困扰了我两天&…...

编程新知 2026/3/27 7:01:26

Cesium使用

Cesium官网&#xff1a;https://cesiumjs.org 官方API文档&#xff1a;https://cesium.com/learn/ion-sdk/ref-doc 中文API文档&#xff1a;https://cesium.xin/cesium/cn/Documentation1.95 　　　　　　　https://cesium.xin Cesium中文社区&#xff1a;http://cesiumcn.org …...

编程新知 2026/3/27 5:52:59

RWKV7-1.5B-g1a部署案例：从零搭建轻量中文对话服务，60秒完成API调用

RWKV7-1.5B-g1a部署案例&#xff1a;从零搭建轻量中文对话服务&#xff0c;60秒完成API调用 1. 模型简介 rwkv7-1.5B-g1a是基于新一代RWKV-7架构开发的多语言文本生成模型&#xff0c;特别适合中文场景下的轻量级对话应用。这个1.5B参数的版本在保持较高生成质量的同时&#…...

编程新知 2026/3/27 5:30:47

OpenClaw环境迁移：GLM-4.7-Flash配置的备份与恢复方案

OpenClaw环境迁移&#xff1a;GLM-4.7-Flash配置的备份与恢复方案 1. 为什么需要环境迁移&#xff1f; 上周我的主力开发机突然硬盘故障&#xff0c;导致所有OpenClaw配置丢失。最痛心的是花了两周调试的GLM-4.7-Flash对接设置全部归零——包括精心调整的温度参数、自定义提示…...

编程新知 2026/3/27 3:39:25

【亲测】OpenClaw怎么部署？2026年OpenClaw华为云8分钟搭建喂奶级教程

【亲测】OpenClaw怎么部署&#xff1f;2026年OpenClaw华为云8分钟搭建喂奶级教程。OpenClaw能做什么&#xff1f;OpenClaw怎么部署&#xff1f;本文面向零基础用户&#xff0c;完整说明在轻量服务器与本地Windows11、macOS、Linux系统中部署OpenClaw&#xff08;Clawdbot&#…...

编程新知 2026/3/27 2:24:43

互联网大厂 Java 面试实战：一次“高并发系统追问”下的真实对话

在大多数 Java 面试中&#xff0c;真正拉开差距的从来不是“你会多少知识点”&#xff0c;而是当系统出现问题时&#xff0c;你是否知道该怎么扛。很多候选人熟悉各种八股文&#xff0c;但一旦进入场景题就会卡住。下面通过一场更贴近真实大厂风格的面试&#xff0c;对话式还原…...

编程新知 2026/3/27 1:52:36

在单细胞测序数据分析中，barcodes、features和matrix是三个最核心的基础文件，它们共同构成了所有分析的基石。

在GEO&#xff08;Gene Expression Omnibus&#xff09;数据库中下载单细胞数据时&#xff0c;最常见的数据存储和提供形式主要有以下四种类型&#xff1a;10x Genomics 标准格式&#xff08;最主流&#xff09;在GEO的数据集中&#xff0c;我们通常会找到一个包含以下三个核心…...

编程新知 2026/3/27 1:03:41

LCDWIKI SPI图形库：嵌入式TFT-LCD驱动核心架构与实战

1. LCDWIKI SPI 图形库深度解析&#xff1a;面向嵌入式显示驱动的底层架构与工程实践LCDWIKI SPI Library 是一款专为基于 SPI 接口的 TFT-LCD 显示模块设计的轻量级、高兼容性图形驱动核心库。它并非孤立的显示驱动&#xff0c;而是整个 LCDWIKI 显示生态系统的“基石类”&…...

编程新知 2026/3/27 0:33:31