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

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

news 2025/7/3 11:07:37

目录

一、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

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/7/1 4:28:17

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/6/15 1:42:04

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/7/2 17:02:25

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/6/25 14:59:03

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/6/15 9:39:08

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/6/24 0:19:44

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/6/21 11:16:25

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2025/6/26 0:06:52

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/6/27 18:25:47

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/6/27 23:02:35