VUE安装部署+应用

news2024/11/25 0:46:27

1.下载vscode
安装教程:https://blog.csdn.net/T1401026064/article/details/128692088
百度网盘:VSCodeUserSetup-x64-1.74.3.exe 提取码:8s8a

2.VUE教程
可以用!快捷输入代码框架。
教程:https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn
复制链接:https://unpkg.com/vue@3
在这里插入图片描述
在这里插入图片描述

3.新建demo文件夹,并且将文件夹拖入vscode,然后再vscode中新建demo.html,根据上面的教程,输入代码
在这里插入图片描述
可以用!快捷输入代码框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">{{ message }}</div>

    <script>
      const { createApp } = Vue
      
      createApp({
        data() {
          return {
            message: 'Hello Vue!'
          }
        }
      }).mount('#app')
    </script>
</body>
</html>

然后用ctrl+s保存,之后安装插件open in browser 和live server ,然后右键open in browser
在这里插入图片描述

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

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

相关文章

解决Git fatal: refusing to merge unrelated histories报错

问题描述 当在远程建立了一个仓库&#xff0c;并且远程的仓库已经初始化了的情况&#xff0c;使用 git remote add origin gitgithub.com:xxx/xxx.git命令添加远程仓库后&#xff0c;执行git pull,然后提示如下&#xff1a; 大致意思就是需要关联我们的本地和远程分支。按照…

【形心】不规则多边形形心计算方法(含面积计算)

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 不规则多边形形心计算若干方法小结 说明&#xff1a; 这里以凹多边形为例&#xff0c;方便排查所计算坐标不在多边形之外。 1. 正文 1.1 方法一 shap…

【网络编程】网络编程套接字(三)TCP网络程序

文章目录 简单的TCP网络程序一、服务器创建套接字二、服务器绑定套接字三、服务器监听四、服务器获取连接五、服务器处理请求六、对服务器进行简单测试七、客户端创建套接字八、客户端连接服务器九、客户端发起请求十、服务器客户端测试 多进程的TCP服务器一、忽略SIGCHLD信号二…

IDEA 搭建Android 开发环境

项目实战 废话不多说开始创建先第一个 Android 项目 步骤一 FILE → New → Project 步骤二-选择 Android 项目模板 选那个安卓机器人,如果没有这个选项,需要升级IDEA版本或者安装安卓插件 选择*Basic Activity* Next-下一步 步骤三-项目初始化 名称、包名、安装位置自行调整…

守护数智未来,开源网安受邀参加2023OWASP北京论坛

2023年7月14日&#xff0c;OWASP中国与网安加社区联合举办的“2023OWASP中国北京安全技术论坛”在北京圆满召开&#xff0c;开源网安受邀参加本次论坛并分享“软件供应链安全治理实践”。 本次“2023OWASP中国北京安全技术论坛”是OWASP中国北京地区年度重要活动之一&#xff…

解决ValueError: If using all scalar values, you must pass an index

使用字典创建DataFrame对象时&#xff0c;会报这样得错误 ValueError: If using all scalar values, you must pass an index 代码如下&#xff1a; 这是因为没有索引所致&#xff0c;所以&#xff0c;需要我们指定索引&#xff0c;来创建DataFrame对象。 模式为&#xff1a…

【C++】模板进阶—非类型模板参数、模板特化及模板的分离编译

&#x1f680; 作者简介&#xff1a;一名在后端领域学习&#xff0c;并渴望能够学有所成的追梦人。 &#x1f681; 个人主页&#xff1a;不 良 &#x1f525; 系列专栏&#xff1a;&#x1f6f8;C &#x1f6f9;Linux &#x1f4d5; 学习格言&#xff1a;博观而约取&#xff0…

jar包发版至服务器Linux命令

maven -> clean compile install / package 使用WinSCP 或者其他软件在target下 找到jar包 传至服务器 找到原先jar包存放位置 cd /usr/local/xxx 通过线上端口号找到线程数 netstat -tunlp | grep 8080 杀死线程 kill -9 线程数 运行新jar包 nohup java -jar jar包名…

利用 jenkins 关联 Job 方式完善 RobotFramework 测试 Setup 以及 Teardown 后操作

目录 1.前言 2.Jekins 关联 Job 方式 1.前言 Jenkins是一个流行的持续集成和交付工具&#xff0c;它可以帮助自动化构建、测试和部署软件。与Robot Framework结合使用&#xff0c;可以实现更高效的测试工作流程。 在Robot Framework中&#xff0c;Setup和Teardown是测试用例…

文件IO_文件同步(附Linux-5.15.10内核源码分析)

目录 1.为什么要进行文件同步&#xff1f; 2.fsync函数介绍 2.1 fsync函数 2.2 fsync函数内核源码分析 2.3 fsync函数使用示例 3.fdatasync函数介绍 3.1 fdatasync函数 3.2 fdatasync函数内核源码分析 3.3 fdatasync函数使用示例 4.sync函数介绍 4.1 sync函数 4.2 …

第一阶段-第十一章 Python基础的综合案例(数据可视化-地图可视化)

目录 一、基础地图使用  1.学习目标  2.视觉映射器  3.本节的演示二、疫情地图-国内疫情地图  1.案例效果  2.函数的语法  3.本节的代码演示三、疫情地图-省级疫情地图  1.案例效果  2.本节的代码演示 说明&#xff1a;该文章是学习 黑马程序员在B站上分享的视…

SPRINGBOOT部署安装hello world

1.安装JAVA环境&#xff0c;设置为全局变量 用以下方法检查&#xff0c;安装是否正确 2.maven安装&#xff0c;并且修改setting中的镜像设置&#xff0c;改为国内阿里云镜像 3.idea中设置JDK版本号&#xff0c;IDEA中springboot不要选择3.0版本&#xff0c;会出现与jdk不匹…

如何在照片上添加水印?这三个方法让你轻松实现

我有个朋友他是一名摄影爱好者&#xff0c;他在旅行中经常能捕捉到一些绝美的照片。他为了分享这份美丽&#xff0c;决定将它们上传到社交媒体上。但是&#xff0c;他很担心别人未经许可就盗用了他的作品。于是他来想我请教这个问题。我就给他推荐了几款加水印软件&#xff0c;…

(学习笔记-TCP基础知识)TCP与UDP区别

UDP UDP不提供复杂的控制机制&#xff0c;利用IP提供面向[无连接]的通信服务。 UDP协议非常简单&#xff0c;头部只有8个字节(位)&#xff0c;UDP的头部格式如下&#xff1a; 目标和源端口&#xff1a;主要是告诉UDP协议应该把报文发给哪个进程包长度&#xff1a;该字段保存了…

CentOS目录详解

在centos中&#xff0c;最顶层的目录称作根目录&#xff0c; 用/表示。/目录下用户可以再创建目录&#xff0c;但是有一些目录随着系统创建就已经存在&#xff0c;接下来重点介绍几个常用目录。 /bin&#xff08;binary&#xff09;包含了许多所有用户都可以访问的可执行文件&a…

轻松实现金蝶云星空与赛意SMOM系统的全面集成

1. 金蝶云星空&#xff1a;为运营协同与管控型企业提供通用ERP服务平台 金蝶云星空是基于当今先进管理理论和数十万家国内客户最佳应用实践开发的ERP服务平台。它针对事业部制、多地点、多工厂等企业和集团公司&#xff0c;提供了通用的企业资源计划&#xff08;ERP&#xff0…

win键无效,键盘Win组合键突然不不能用如何解决?

电脑win键失效怎么办&#xff1f; 在使用windows系统的时候&#xff0c;发现一个问题&#xff0c;就是win键失效了&#xff0c;怎么按都没有反应&#xff0c;该怎么办呢&#xff1f; 键盘方面的原因 此时之是键盘的原因与系统本身没有关系&#xff0c;键盘屏蔽热键主要目标是…

【技能实训】DMS数据挖掘项目-Day13

文章目录 任务15【任务15.1】ClientFrame.java【任务15.2】ClientFrame.java【任务15.3】实现匹配日志信息或物流数据的数据保存功能&#xff08;保存到本地文件&#xff09;&#xff0c;将15.2中&#xff0c;返回的匹配数据&#xff0c;保存到客户端文件中【任务15.4】实现物流…

恢复软件哪些好?推荐3款,亲试好用!

“想问下朋友们有什么好的恢复软件推荐吗&#xff1f;我的电脑数据经常都莫名其妙就找不到了&#xff0c;我也不敢随意进行操作。如果有好的数据恢复软件&#xff0c;快给我推荐推荐吧&#xff01;” 电脑数据很多都是比较重要的&#xff0c;如果经常丢失数据&#xff0c;会对我…

DV SSL证书

一、DV SSL证书是什么&#xff1f; DV SSL&#xff08;又称域名验证型证书&#xff09;是便宜又快速实现网站HTTPS加密、有效防劫持的SSL证书。购买DV证书仅需百十元起&#xff0c;只需验证域名的所有权&#xff0c;3-5分钟极速签发。因此&#xff0c;DV SSL证书成为众多个人网…