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

创建vue3工程

news 2026/5/11 15:22:11

一、新建工程目录E:\vue\projectCode\npm-demo用Visual Studio Code 打开目录

二、点击新建文件夹按钮，新建vue3-01-core文件夹

三、右键vue3-01-core文件夹点击在集成终端中打开

四、初始化项目，输入npm init 一直敲回车直到创建成功如下图

npm init

五、安装vue3 

npm install vue@3.2.47

六、创建vue helloworld 页面

1、点击新建文件按钮，创建helloword.html

2、文本输入！加tab 插入html 模版

3、输入代码

  • 声明一个根节点：vue管理dom的入口
  • 引入vue.js库文件
  • 编写vue.js代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue模版语法</title>
</head>
<body><!--1.声明一个根节点：vue管理dom的入口2.引入vue.js库文件3.编写vue.js代码--><!--2.引入vue.js库文件--><div id="app">{{ msg }}</div><!--1.声明一个根节点：vue管理dom的入口--><script src="./node_modules/vue/dist/vue.global.js"></script><!--3.编写vue.js代码，要在上面引用vue3库--><script type="text/javascript">// 在vue.global.js 导出了Vue 实例，他向外暴露了很多方法const { createApp } =Vue;//不要加单引号，首字母大写// 通过导入的createApp 创建一个应用实例createApp({//传递一个对象{}//data选项，必须是函数，返回一个对象，在这个返回对象中的属性就是对应要vue中要使用data(){return{msg: 'hello,vue3'//声明一个变量}}}).mount('#app');</script>
</body>
</html>

4、通过liveserver 插件，运行服务。

效果如下

相关文章：

创建vue3工程

一、新建工程目录E:\vue\projectCode\npm-demo用Visual Studio Code 打开目录 二、点击新建文件夹按钮&#xff0c;新建vue3-01-core文件夹 三、右键vue3-01-core文件夹点击在集成终端中打开 四、初始化项目&#xff0c;输入npm init 一直敲回车直到创建成功如下图 npm init 五…...

编程日记 2023/10/6 3:07:00

Flutter笔记 - 用于描述Align的Alignment、AlignmentDirectional、AlignmentTween类

Flutter笔记 用于描述Align的Alignment、AlignmentDirectional、AlignmentTween类 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_…...

编程日记 2023/10/6 3:05:59

门面模式简介

门面模式简介 门面模式&#xff08;Facade Pattern&#xff09;是一种结构性设计模式&#xff0c;它提供了一个简化复杂系统的接口&#xff0c;允许客户端通过一个统一的接口与系统交互&#xff0c;而不需要了解系统内部的复杂性。这个模式的目标是降低客户端与系统之间的耦合…...

编程日记 2023/10/6 3:04:57

2023年7月工作经历二

invoke的翻译 C#的这个关键字很熟&#xff0c;但不知道如何翻译比较好。和网友沟通&#xff0c;并查阅多篇博文&#xff0c;觉得“同步调用&#xff08;invoke&#xff09;和异步调用(beginvoke)”比较好。 VS2022很爽 C#的类名&#xff0c;会提示命名空间。C调试的时候&…...

编程日记 2023/10/6 3:03:56

7.wifi开发【智能家居：终】，实践总结：智能开关，智能采集温湿，智能灯。项目运行步骤与运行细节，技术归纳与提炼，项目扩展

一。项目运行步骤与运行细节 1.项目运行步骤&#xff08;一定有其他的运行方式&#xff0c;我这里只提供一种我现在使用的编译方式&#xff09; &#xff08;1&#xff09;项目运行使用软件与技术&#xff1a; 1.Virtual linux 使用这个虚拟机进行程序的编译 2.Makefile与shl…...

编程日记 2023/10/6 3:00:53

学习开发一个RISC-V上的操作系统（汪辰老师） — unrecognized opcode `csrr t0,mhartid‘报错问题

前言 &#xff08;1&#xff09;此系列文章是跟着汪辰老师的RISC-V课程所记录的学习笔记。 &#xff08;2&#xff09;该课程相关代码gitee链接&#xff1b; &#xff08;3&#xff09;PLCT实验室实习生长期招聘&#xff1a;招聘信息链接 正文 &#xff08;1&#xff09;在跟着…...

编程日记 2023/10/6 2:56:50

【计算机网络】 心跳机制

文章目录 心跳机制应用场景什么是心跳机制心跳包的发送&#xff0c;通常有两种技术 心跳机制 应用场景 在长连接下&#xff0c;有可能很长一段时间没有数据往来。理论上说&#xff0c;这个连接是一直保持连接的&#xff0c;但是实际情况中&#xff0c;如果中间节点出现什么故…...

编程日记 2023/10/6 2:52:46

文心一言 VS 讯飞星火 VS chatgpt （106）-- 算法导论10.1 4题

四、用go语言&#xff0c;重写 ENQUEUE 和 DEQUEUE 的代码&#xff0c;使之能处理队列的下溢和上溢。 文心一言&#xff1a; 在 Go 语言中&#xff0c;我们可以使用切片来实现队列。下面是如何实现 ENQUEUE 和 DEQUEUE 操作&#xff0c;同时处理队列的下溢和上溢的情况&#…...

编程日记 2023/10/6 2:46:37

进程调度算法之时间片轮转调度(RR)，优先级调度以及多级反馈队列调度

1.时间片轮转调度算法(RR) round Robin 1.算法思想 公平地、轮流地为各个进程服务&#xff0c;让每个进程在一定时间间隔内都可以得到响应。 2.算法规则 按照各进程到达就绪队列的顺序&#xff0c;轮流让各个进程执行一个时间片&#xff08;如100ms&#xff09;。 若进程未…...

编程日记 2023/10/6 2:39:30

ARMv8如何读取cache line中MESI 状态以及Tag信息（tag RAM dirty RAM）并以Cortex-A55示例

Cortex-A55 MESI 状态获取 一&#xff0c;系统寄存器以及读写指令二&#xff0c;Cortex-A55 Data cache的MESI信息获取&#xff08;AARCH 64&#xff09;2.1 将Set/way信息写入Data Cache Tag Read Operation Register2.2 读取Data Register 1和Data Register 0数据并解码 参考…...

编程日记 2023/10/6 2:37:28

密码技术 (6) - 证书

一. 前言 前面介绍的公钥密码和数字签名&#xff0c;都无法解决一个问题&#xff0c;那就是判断自己获取的公钥是否期望的&#xff0c;不能确定公钥是否被中间攻击人掉包。所以&#xff0c;证书的作用是用来证明公钥是否合法的。本文介绍的证书就是解决证书的可靠性的技术。 二…...

编程日记 2023/10/6 2:36:27

【算法学习】-【双指针】-【盛水最多的容器】

LeetCode原题链接&#xff1a;盛水最多的容器 下面是题目描述&#xff1a; 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。…...

编程日记 2023/10/6 2:35:27

JAVA面经整理(8)

一)为什么要有区&#xff0c;段&#xff0c;页&#xff1f; 1)页是内存和磁盘之间交互的基本单位内存中的值修改之后刷到磁盘的时候还是以页为单位的索引结构给程序员提供了高效的索引实现方式&#xff0c;不过索引信息以及数据记录都是记录在文件上面的&#xff0c;确切来说是…...

编程日记 2023/10/6 2:34:26

【Java 进阶篇】JDBC数据库连接池Druid详解

在Java应用程序中&#xff0c;与数据库进行交互是一个常见的任务。为了更有效地管理数据库连接并提高性能&#xff0c;数据库连接池是一种常见的解决方案。Druid是一个流行的JDBC数据库连接池&#xff0c;它具有丰富的功能和高性能。本博客将详细介绍Druid连接池&#xff0c;包…...

编程日记 2023/10/6 2:31:24

Linux——指令初识

Linux下基本指令 前言一、 ls 指令二、 pwd命令三、cd 指令四、 touch指令五、mkdir指令六、rmdir指令 && rm 指令七、man指令八、cp指令九、mv指令十、cat指令十一、.more指令十二、less指令十三、head指令十四、tail指令总结 前言 linux的学习开始啦&#xff01; 今…...

编程日记 2023/10/6 2:30:23

专题一：双指针【优选算法】

双指针应用场景&#xff1a; 数组划分、数组分块 目录 一、移动0 二、复写0 从后向前 三、快乐数 链表带环 四、盛水最多的容器 单调性双指针 五、有效三角形个数 单调性双指针 六、和为s的两个数字 七、三数之和 细节多 需再练 一、移动0 class Solution { public:void move…...

编程日记 2023/10/6 2:28:20

蓝桥等考Python组别十二级007

第一部分：选择题 1、Python L12 （15分） 运行下面程序，输出的结果是（ ）。 lis = [A, B, C, D, E, F] print(lis[0 : 3]) [A, B, C][A, B][A, B, C, D][B, C, D]正确答案：A 2...

编程日记 2023/10/6 2:27:16

全方位介绍工厂的MES质量检验管理系统

一、MES质量检验管理系统的定义&#xff1a; MES质量检验管理系统是基于制造执行系统的框架和功能&#xff0c;专注于产品质量的控制和管理。它通过整合和优化质量检验流程&#xff0c;提供实时的数据采集、分析和反馈&#xff0c;帮助工厂实现高效的质量管理。该系统涵盖了从…...

编程日记 2023/10/6 2:26:15

避免风险，亚马逊、沃尔玛、阿里国际站选择什么样的测评方式最安全？

亚马逊、沃尔玛、速卖通、阿里国际站上做测评是最有效的推广手段之一&#xff0c;而测评又存在很大的风险。但是测评的风险来自哪里&#xff1f;什么样的测评方式才安全呢&#xff1f; 因为平台大数据风控点很多&#xff0c;根据洪哥六七年的测评经验&#xff0c;风控包括以下…...

编程日记 2023/10/6 2:25:14

【C语言】语法--联合体union详解

本文参考博客： https://blog.csdn.net/m0_57180439/article/details/120417270 定义及示例： 联合是一种特殊的自定义类型，该种类型定义的变量也包含一系列的成员，特征是这些成员共用同一块空间，所以联合体也被称为共用体。 #include<stdio.h> union Un//联合类型…...

编程日记 2023/10/6 2:23:13

别再到处找靶场了！一个OWASP BWA虚拟机搞定30+个Web漏洞环境（附SSH连接与MySQL密码修改指南）

OWASP BWA&#xff1a;一站式Web安全实战环境的终极解决方案 对于Web安全初学者和爱好者来说&#xff0c;寻找合适的漏洞靶场往往比学习技术本身更令人头疼。你是否也曾在不同平台间反复切换&#xff0c;下载各种零散的虚拟机镜像&#xff0c;只为练习一个简单的SQL注入或XSS漏…...

编程新知 2026/5/11 15:09:05

VideoDownloadHelper实战指南：全网视频一键下载的高效方案

VideoDownloadHelper实战指南&#xff1a;全网视频一键下载的高效方案 【免费下载链接】VideoDownloadHelper Chrome Extension to Help Download Video for Some Video Sites. 项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper 还在为无法保存心仪的在…...

编程新知 2026/5/11 10:56:25

RT-DTER最新创新改进系列：融合BoTNet模块，ResNet的最后三个的卷积层替换成MHSA层，融合CNN+自然语言处理技术的优势，提升检测效果！打造创新点！！！

RT-DTER最新创新改进系列&#xff1a;融合BoTNet模块&#xff0c;ResNet的最后三个的卷积层替换成MHSA层&#xff0c;融合CNN自然语言处理技术的优势&#xff0c;提升检测效果&#xff01;打造创新点&#xff01;&#xff01;&#xff01; 购买相关资料后畅享一对一答疑&#…...

编程新知 2026/5/11 10:35:53

开源AI教练Sage Coach：基于提示词工程的认知引导系统设计与实践

1. 项目概述&#xff1a;当AI成为你的专属人生教练凌晨三点&#xff0c;创业第三年&#xff0c;账上资金只够撑两个月&#xff0c;合伙人刚刚离开。这不是电影情节&#xff0c;而是许多创业者、职场人乃至普通人可能遭遇的真实困境。在那个时刻&#xff0c;打开终端&#xff0c…...

编程新知 2026/5/11 9:47:08

C#循环入门指南：从0到1掌握循环逻辑

一、for循环&#xff1a;已知循环次数&#xff0c;首选它for循环是最常用、最规范的循环&#xff0c;适合已知循环次数的场景&#xff08;比如打印10遍文字、计算1到100的和&#xff09;。它的结构很固定&#xff0c;就像一个“固定流程的重复机器”&#xff0c;一步都不会乱。…...

编程新知 2026/5/11 9:23:26

高效Kolmogorov-Arnold网络：PyTorch实现终极指南 [特殊字符]

高效Kolmogorov-Arnold网络&#xff1a;PyTorch实现终极指南 &#x1f680; 【免费下载链接】efficient-kan An efficient pure-PyTorch implementation of Kolmogorov-Arnold Network (KAN). 项目地址: https://gitcode.com/GitHub_Trending/ef/efficient-kan Kolmogor…...

编程新知 2026/5/11 8:26:22

ARM架构线程私有内存管理及TPMAX0_EL1寄存器详解

1. ARM架构线程私有内存管理概述在ARMv8/v9架构中&#xff0c;线程私有内存&#xff08;Thread-Private Memory&#xff09;是一种重要的内存保护机制。它允许操作系统为每个线程定义专属的内存区域&#xff0c;其他线程无法访问&#xff0c;从而提供硬件级别的内存隔离。这种机…...

编程新知 2026/5/11 7:58:27

Java数据结构6（队列和二叉树初步）

目录1&#xff0c;队列的性质2&#xff0c;循环队列3&#xff0c;队列链式存储4&#xff0c;树的性质5&#xff0c;二叉树的遍历6&#xff0c;代码实现一&#xff0c;队列的性质同样是线性表&#xff0c;队列有线性表的相关操作&#xff0c;不过不同的是队列的性质为先进先出&a…...

编程新知 2026/5/11 7:11:38

示波器有效位数（ENOB）实战指南：从原理到选型与应用

1. 从“看见”到“看清”&#xff1a;示波器有效位数&#xff08;ENOB&#xff09;的实战解读在电子工程师的日常里&#xff0c;示波器就是我们观察电路世界的“眼睛”。它能让我们直观地看到信号在连接器、线缆、PCB走线和元器件之间穿梭的模样。但就像视力有1.0和1.5的区别一…...

编程新知 2026/5/11 6:06:18

基于PyTorch的图像分类实战：从数据增强到模型微调全流程解析

1. 项目概述&#xff1a;一个基于深度学习的开源图像识别工具最近在整理个人项目库时&#xff0c;翻到了一个挺有意思的仓库&#xff0c;叫jyao97/xylocopa。乍一看这个名字&#xff0c;可能有点摸不着头脑&#xff0c;但如果你对昆虫学或者开源项目命名有点了解&#xff0c;就…...

编程新知 2026/5/11 4:34:34