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

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

news 2025/9/6 16:42:38

目录

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

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/9/5 10:38:20

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/9/3 21:38:48

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2025/9/5 19:48:24

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/9/1 20:02:32

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/9/2 17:49:38

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/9/5 10:51:32

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

编程新知 2025/9/2 18:46:33