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

用VSCode搭建Vue.js开发环境及Vue.js第一个应用

news 2026/2/10 7:34:42

目录

一、VSCode安装

二、VSCode简单配置

三、Vue.js的下载和引入

四、Vue.js第一个应用

一、VSCode安装

        Visual Studio Code是一个轻量级但功能强大的源代码编辑器，可在您的桌面上运行，可用于Windows，macOS和Linux。它内置了对JavaScript，TypeScript和Node的支持.js并具有针对其他语言和运行时（如C++，C#，Java，Python，PHP，Go，.NET）的丰富扩展生态系统。

VSCode官网：

Visual Studio Code - Code Editing. Redefinedicon-default.png?t=N176https://code.visualstudio.com/在官网选择自己电脑对应的操作系统进行安装

 选择我同意点击下一步

 

选择安装路径，建议安装在非C盘

默认下一步即可 

 

 

 安装中--

 

二、VSCode简单配置

在VSCode中安装这三个组件，第一个是汉化包，第二个是可以支持编写html和css的组件，第三个可是可在VSCode中直接打开浏览器的组件

然后选择对应的文件夹，就能编写对应的代码了！

三、Vue.js的下载和引入

Vue.js的下载引入有三种方法：

1、在vue官网下载独立版本直接引入

2、使用CDN引入Vue.js

3、使用node.js的npm安装Vue.js

在本篇博客直接使用第一种最简单的方法进行引入

Vue.js下载地址：

安装 — Vue.js (vuejs.org)icon-default.png?t=N176https://v2.cn.vuejs.org/v2/guide/installation.html选择开发版本进行下载

        下载完成后把Vue.js复制粘贴到对应的路径中，我粘贴到了当前路径 ，在引入的时候就能直接用当前路径进行引入

四、Vue.js第一个应用

Vue.js应用的开发离不开Vue实例，第一个应用代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="vue-2.7.14.js"></script><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!--将msg的值绑定到p元素--><p>{{msg}}</p ></div><script>//创建vue实例var vm=new Vue({el:"#app",data:{msg:"Hello Vue.js"}})</script>
</body>
</html>

执行结果：

注意：Vue.js的核心允许采用简介的模板语法来声明式的将数据渲染进DOM，所以可以直接双击打开demo01.html页面，无需在服务器条件下访问，便于实现数据绑定的显示效果。 

相关文章：

用VSCode搭建Vue.js开发环境及Vue.js第一个应用

目录 一、VSCode安装 二、VSCode简单配置 三、Vue.js的下载和引入 四、Vue.js第一个应用 一、VSCode安装 Visual Studio Code是一个轻量级但功能强大的源代码编辑器&#xff0c;可在您的桌面上运行&#xff0c;可用于Windows&#xff0c;macOS和Linux。它内置了对JavaScrip…...

编程日记 2023/2/16 13:38:19

Leetcode 每日一题 2341. 数组能形成多少数对

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…...

编程日记 2023/2/16 13:37:13

前后端分离-小项目-3前后端交互

第一步编写前端页面&#xff0c;第二步搭建后端环境&#xff0c;现在开始第三步&#xff0c;继续完善前端功能完善“添加”按钮功能Ajax异步请求安装在前端项目安装ajax。在Terminal输入&#xff1a;npm i axios -S点击“添加”按钮&#xff0c;弹出Dialog对话框设置对话框里面…...

编程日记 2023/2/16 13:36:01

Spring如何整合MyBatis框架？使用XML及java类的配置方式

前言 Spring文章链接: 从头到尾Spring概念&#xff0c;家族&#xff0c;核心技术使用&#xff0c;事务这一篇就够了&#xff01;&#xff01;&#xff01;_千小半的博客-CSDN博客_spring最新技术 mybatis文章链接: MyBatis框架入门(含实例)_mybatis sqlsession创建和关闭_千小…...

编程日记 2023/2/16 13:34:53

第七届蓝桥杯省赛——8冰雹数（递归）

题目&#xff1a;任意给定一个正整数N&#xff0c;如果是偶数&#xff0c;执行&#xff1a; N / 2如果是奇数&#xff0c;执行&#xff1a; N * 3 1生成的新的数字再执行同样的动作&#xff0c;循环往复。通过观察发现&#xff0c;这个数字会一会儿上升到很高&#xff0c;一会…...

编程日记 2023/2/16 13:33:45

Android 10.0 设置静态ip重启后获取不到ip的修复

1.概述 在定制化开发中，对于设置静态ip以后可以正常使用，但是遇到一个新问题 就是开机以后，获取不到ip 地址，这就有点不正常了，获取不到ip 就自然连不上网了，所以要分析问题所在解决问题 2.设置静态ip重启后获取不到ip的修复的核心代码 frameworks/opt/net/ethernet/java…...

编程日记 2023/2/16 13:32:39

mysql笔记

基础 概念 数据库体系结构的三级模式为&#xff1a;外模式、概念模式和内模式。 内模式&#xff1a;存储模式&#xff0c;对数据的物理结构和存储方式的描述。提供数据定义语言定义的。如顺序还是索引存储&#xff08;将概念模式定义的数据进行组织存储&#xff0c;达到较好…...

编程日记 2023/2/16 13:31:31

华为OD机试 - 最多等和不相交连续子序列（Python）| 真题+思路+考点+代码+岗位

最多等和不相交连续子序列 题目 给定一个数组，我们称其中连续的元素为连续子序列，称这些元素的和为连续子序列的和。 数组中可能存在几组连续子序列，组内的连续子序列互不相交且有相同的和。 求一组连续子序列，组内子序列的数目最多。输出这个数目。 输入 第一行输入为…...

编程日记 2023/2/16 13:30:23

第四届宁波网安市赛训练题

Crypto 散乱的密文 8fd4a4c94gf15{50}l72d3提示了2 1 6 5 3 4&#xff0c;我们直接横向排列 2165348fd4a4c94gf15{50}l72d3 按顺序竖着抄下来fc1l84f}a45dg034{2d957,然后栅栏解密&#xff0c;注意这里是W型栅栏解密&#xff0c;行数6 flag:flag{52048c453d794df1} 综合解密…...

编程日记 2023/2/16 13:29:11

Windows中MySQL 8.x版本忘记密码如何重设

Windows中MySQL 8.x版本忘记密码如何重置 文章目录Windows中MySQL 8.x版本忘记密码如何重置一、前言二、重置密码操作1、停止MySQL服务2、以安全模式启动MySQL服务3、无密码登录mysql4、重置登录密码5、验证密码是否重置成功三、最后我想说一、前言 好久之前在电脑下载的MySQL…...

编程日记 2023/2/16 13:28:06

【信管12.1】信息文档管理与配置管理

信息文档管理与配置管理对于项目管理来说&#xff0c;文档非常重要&#xff0c;如果是传统的工程行业项目的话&#xff0c;仅仅标书就是几百上千页的。相对来说&#xff0c;其实信息系统开发项目已经好很多了。另外就是配置项&#xff0c;它是比文档更大的一个概念&#xff0c;…...

编程日记 2023/2/16 13:26:59

一文搞懂Linux的标准输出/错误重定向

前言 今天在写一个脚本时&#xff0c;需要将shell命令和可执行程序的输出重定向在某一个log文件中&#xff0c;但是遇到了点小问题&#xff0c;索性就研究下输出重定向到底怎么回事。 Linux系统&#xff0c;有一个非常重要概念&#xff0c;就是一切皆文件。在使用shell脚本时&a…...

编程日记 2023/2/16 13:25:51

【OJ】计数的梦

&#x1f4da;Description: Bessie 处于半梦半醒的状态。过了一会儿&#xff0c;她意识到她好像在数羊&#xff0c;不能入睡。Bessie的大脑反应灵敏&#xff0c;仿佛真实地看到了她数过的一个又一个数。她开始注意每一个数码&#xff1a;每一个数码在计数的过程中出现过多少次…...

编程日记 2023/2/16 13:24:44

【项目实战】MySQL使用CONCAT字符串拼接函数实现与特殊字符的拼接

一、需求说明 因为有新功能需要上生产环境&#xff0c;总有一些乱七八糟的兼容历史数据的活要去做&#xff0c;比如以下。 需要批量的更新数据库中某个字段&#xff08;如id列中原来是ABCDEFG&#xff0c;需要改成[“ABCDEFG”]&#xff09;&#xff0c; 没错&#xff0c;就是…...

编程日记 2023/2/16 13:23:39

OpenCV实战（11）——形态学变换详解

OpenCV实战&#xff08;11&#xff09;——形态学变换详解0. 前言1. 腐蚀和膨胀运算1.1 腐蚀和膨胀基础1.2 使用形态学滤波器执行图像腐蚀和膨胀运算2. 开运算和闭运算2.1 使用形态学滤波器执行图像开运算和闭运算3. 形态学变换应用3.1 使用形态学滤波器检测边缘3.2 使用形态学…...

编程日记 2023/2/16 13:22:29

SPI协议详解(Standard SPI、Dual SPI和Queued SPI)

1、标准SPI 1.1、SPI接口的引脚 (1)SCLK&#xff1a;时钟线&#xff1b; (2)MOSI(master output slave input)&#xff1a;主设备输出&#xff0c;从设备输入&#xff0c;单向传输&#xff1b; (3)MISO(master input slave output)&#xff1a;主设备输入&#xff0c;从设备输…...

编程日记 2023/2/16 13:21:23

【代码随想录二刷】Day15-二叉树-C++

代码随想录二刷Day15 今日任务 层序遍历 226.翻转二叉树 101.对称二叉树 语言&#xff1a;C 层序遍历 102.二叉树的层序遍历 class Solution { public:vector<vector<int>> levelOrder(TreeNode* root) {vector<vector<int>> res;if(root NULL) …...

编程日记 2023/2/16 13:20:15

C++为什么能重夺年度语言？

目录一、爷青回1、年初依旧很多大新闻&#xff0c;其中一条就是TIOBE把年度编程语言颁给了C。2、这是什么概念&#xff1f;那一年Java的流行指数是14%。二、C为什么衰落三、C为什么重新流行1、C为什么重新流行起来了呢&#xff1f;2、C究竟做对了什么呢&#xff1f;3、根本原因…...

编程日记 2023/2/16 13:19:09

视频监控实时接入——以海康威视为例（2023.2.16）

海康威视实时视频监控接入学习 2023.2.16引言1、视频协议简介1.1 RTSP——Real Time Streaming Protocol&#xff08;实时流传输协议&#xff09;1.2 RTMP——Real Time Messaging Protocol&#xff08;实时消息传输协议&#xff09;1.3 HLS——HTTP Live Streaming&#xff08…...

编程日记 2023/2/16 13:18:05

推荐系统[一]：超详细知识介绍，一份完整的入门指南，解答推荐系统是什么。

1. 推荐算法的初步理解 如果说互联网的目标就是连接一切，那么推荐系统的作用就是建立更加有效率的连接，推荐系统可以更有效率的连接用户与内容和服务，节约了大量的时间和成本。 1.1 推荐系统主要解决问题 任务一：挖掘长尾：帮助用户找到想要的物品（音乐、商品、新闻），…...

编程日记 2023/2/16 13:16:59

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/8 4:37:17

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/8 4:37:13

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/8 22:07:52

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28