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

news2024/11/17 4:41:45

目录

一、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页面,无需在服务器条件下访问,便于实现数据绑定的显示效果。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/349303.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

阿里一P7员工为证明自己年入百万,晒出工资,却被网友...

阿里的工资在行业内确实是比较高的一类&#xff0c;之前网络上流传着阿里P7年入百万的消息也不是空穴来风&#xff0c;日前&#xff0c;有位阿里P7员工&#xff0c;为了证明自己的确年入百万&#xff0c;晒出了他的工资&#xff0c;网友们看完都沸腾了。什么情况&#xff1f;一…

BSN全球伙伴大会于本周五召开在即,重磅嘉宾演讲主题前瞻

“第三届区块链服务网络&#xff08;BSN&#xff09;全球合作伙伴大会”召开在即&#xff0c;将于2023年2月17日&#xff08;本周五&#xff09;在杭州市拱墅区举办。 BSN已邀请到来自国内外的行业专家学者与生态合作伙伴&#xff0c;与各界来宾就“建设数字中国”指导思想中的…

iOS 客户端 IM 消息卡片插件化

背景 目前探探 IM 聊天消息列表由于长年累月的代码堆积&#xff0c;对业务迭代产生了很多的困扰。所以趁着工作中的一些空隙&#xff0c;对聊天页消息卡片做了插件化&#xff0c;使得不同的消息类型&#xff0c;可以根据具体需求方便的增删迭代。下面分享一下自己重构过程中一…

项目经理,千万不要在这时候跳槽

早上好&#xff0c;我是老原。节后开工也一段时间了&#xff0c;有不少小友私信老原想要面试题库&#xff0c;大多都是想要跳槽涨薪的......当然除了在做准备的&#xff0c;也有不少朋友都在诉苦&#xff1a;其实&#xff0c;不少人回头去看自己过去经验感觉就像个打杂的&#…

PCB中的HDI板生产中的变化

关键词&#xff1a;HDI概述 HDI发展演变 HDI生产难点如果把一整个电子产业比作浩瀚的宇宙&#xff0c;那些智能电子设备就像宇宙中闪耀的星光&#xff0c;当你以“上帝”的视角手持放大镜去观察时&#xff0c;这些闪烁的星光点点其实都是一个个由精密的“自然规律”所“设计”好…

金三银四丨黑蛋老师带你剖析-CTF岗

作者丨黑蛋二进制是个庞大的方向&#xff0c;对应着许许多多方向的岗位&#xff0c;除了之前说过的逆向岗位&#xff0c;漏洞岗位&#xff0c;病毒岗位&#xff0c;还有专门打CTF的岗位&#xff0c;CTF是网络安全领域的一种比赛。普遍来讲&#xff0c;大学生学习网络安全都会参…

percona软件介绍 、 innobackupex备份与恢复

1. 常用的mysql备份工具 物理备份缺点&#xff1a; 跨平台差。备份时间长、冗余备份、浪费存储空间。 解释如下&#xff1a;如Linux操作系统和Windows操作系统之间&#xff0c;由于文件系统不一样&#xff0c;如Linux操作系统的文件系统是ext4、xfs&#xff0c;Windows操作系统…

K8s+SpringBoot+gRpc

本文使用K8s当做服务注册与发现、配置管理&#xff0c;使用gRpc用做服务间的远程通讯一、先准备K8s我在本地有个K8s单机二、准备service-providerpom<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.…

浅谈性能测试监控系统,做好关键指标的监控

随着业务的增长&#xff0c;服务器部署由单一架构向分布式集群架构转变&#xff0c;性能测试过程中指标监控也由单一服务器向集群服务器转变。 对于性能测试团队来说&#xff0c;需要建立起适用于测试的多机监控系统&#xff0c;以便后期顺利且高效地进行监控分析调优&#xf…

Java程序员拿下高薪offer需要具备哪些能力?这份Java面试专题汇总助你拿下心仪offer!!

背景今天这篇文章的灵感来自一个粉丝的亲身经历&#xff0c;想必也是求职浪潮中很多朋友的经历&#xff0c;内卷大环境找不到满意工作的人太多了&#xff0c;之前也有很多人问过我怎么才能找到不错的工作&#xff0c;甚至是进大厂&#xff0c;所以今天就借这位粉丝的经历来聊聊…

对JAVA 中“指针“理解

对于Java中的指针&#xff0c;以下典型案例会让你对指针的理解更加深刻。 首先对于&#xff1a; 系统自动分配对应空间储存数字 1&#xff0c;这个空间被变量名称b所指向即: b ——> 1 变量名称 空间 明…

linux下yum安装consul实现动态配置管理

一、yum安装consul #安装yum-utils yum install -y yum-utils#配置consul的下载仓库 yum-config-manager --add-repo https://rpm.releases.hashicorp.com/RHEL/hashicorp.repo#必须上面步骤&#xff0c;不然会找不到仓库 yum -y install consul#查看版本 consul -v 二、启动…

基于深度学习的三维重建(二):pytorch的简单操作及DataLoader、Dataset类简介

目录 1.numpy举几个demo 2.pytorch基础 2.1 tensor介绍 3.简单版DataSet & DataLoader 4.模型构建 5.深度学习模型demo&#xff1a;手写文字识别 5.1 构建网络 5.2 前向传播过程 5.3 训练部分 5.4 测试部分 5.5 模型导出 5.6 模型测试 6.pytorch可视化工具ten…

MySQL数据库调优————索引数据结构

B-TREE B-TREE数据结构 B-TREE特性 根节点的子结点个数2 < X < m&#xff0c;m是树的阶 假设m 3&#xff0c;则根节点可有2-3个孩子 中间节点的子节点个数m/2 < y < m 假设m 3&#xff0c;中间节点至少有2个孩子&#xff0c;最多3个孩子 每个中间节点包含n个关…

《MySql学习》 行锁对业务的影响

一. 行锁介绍 行锁由各个存储引擎分别实现&#xff0c;MyISAM存储引擎是不支持行锁的&#xff0c;这也是MySQL使用InnoDB作为默认存储引擎的一个重要原因&#xff0c;锁更细的InnoDB能支持更多的并发业务。但需要注意的是&#xff0c;行锁在InnoDB的实现是给索引加的锁&#x…

智慧养殖无线通讯解决方案

一、方案概述农植畜禽/水产养殖智能监控系统可以在远端设备实现对如温度、湿度、气体浓度、光照度等传感设备的自动调节与控制功能。管理者可随时通过电脑了解养殖场各环节的运行状况&#xff0c;并根据养殖现场内外环境因子的变化情况将命令下发到现场执行设备。为动植物营造舒…

docker-compose安装SonarQube

前言SonarQube 是一个开源的代码分析平台, 用来持续分析和评测项目源代码的质量。 通过SonarQube我们可以检测出项目中重复代码&#xff0c; 潜在bug&#xff0c; 代码规范&#xff0c;安全性漏洞等问题&#xff0c; 并通过SonarQube web UI展示出来。一、docker-compose配置#v…

【Python】编写代码实现指定下标值顺序进行正序和倒序排序算法编程

&#x1f389;&#x1f389; 在本次python文章中&#xff0c;主要通过定义一个排序方法&#xff0c;实现一组数列能够按照另一组数列指定的位置进行重新排序输出&#xff0c;默认正序排序&#xff0c;可通过True表示逆序输出 目录1、知识点2、数列和元组1&#xff09;错误遍历方…

全网多种方式解决Knife4j文档请求异常

文章目录1. 复现问题2. 分析问题3. 解决问题4. 其他方法解决此异常5. 其他说明1. 复现问题 今天在本地启动项目后&#xff0c;刷新Knife4j接口文档&#xff0c;却报出如下错误&#xff1a; 即Knife4j文档请求异常。 2. 分析问题 报出Knife4j文档请求异常错误时&#xff0c;赶…

生活不一定很酷,但是一定要全力以赴

题记&#xff1a;努力是为了让自己不平庸 当看到这个话题“竞赛那些事”&#xff0c;我还是有所触动的&#xff0c;我本身就是一个不喜欢安逸&#xff0c;喜欢折腾的人&#xff0c;纵使不能把日子过成诗&#xff0c;也要折腾成向往的样子。 我的记忆在脑海中不停翻着页&#x…