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

创建vue3工程

news 文章来源：https://blog.csdn.net/QWERTY55555/article/details/133589661 2024/12/15 8:34:05

一、新建工程目录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

接口测试复习

一。基本概念 接口概念&#xff1a;系统与系统之间 数据交互的通道。 接⼝测试概念&#xff1a;校验 预期结果 与 实际结果 是否⼀致。 特征&#xff1a; 测试⻚⾯测试发现不了的问题。&#xff08;因为&#xff1a;接⼝测试 绕过前端界⾯。 &#xff09; 符合质量控制前移理…...

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

获取医疗器械板块的个股列表

获取医疗器械板块的个股列表&#xff0c;用python爬虫做到&#xff08;数据网址&#xff1a;板块 - 医疗器械概念 - 股票行情中心 - 搜狐证券&#xff09; import requests from bs4 import BeautifulSoup # 获取医疗器械概念个股列表url "https://q.stock.sohu.com/cn/…...

编程日记 2023/10/6 2:19:09

1026 程序运行时间

要获得一个 C 语言程序的运行时间&#xff0c;常用的方法是调用头文件 time.h&#xff0c;其中提供了 clock() 函数&#xff0c;可以捕捉从程序开始运行到 clock() 被调用时所耗费的时间。这个时间单位是 clock tick&#xff0c;即“时钟打点”。同时还有一个常数 CLK_TCK&…...

编程日记 2023/10/6 2:17:06

博途1200/1500 ALT指令

SMART PLC的ALT指令实现代码，请查看下面文章博客 SMART PLC如何构造ALT指令_smart200类似alt指令-CSDN博客单按钮启停这些老生常谈的问题，很多人感兴趣。这篇博文讨论下不同的实现方法，希望对大家有所帮助。指令虽然简单，但是在编程的时候合理使用对我们高效率编程帮助还是…...

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

11、视频分类建议

8、绩效看板与日清计划 9、大小屏分离与精细化审核 10、质量审核的设立与合并 视频分类印象深刻&#xff0c;因为这是我亲手做的第一个增效工具。 审核的其中一个任务是保证视频分类信息的准确性&#xff0c;账号本身是有一个缺省分类的&#xff0c;内容上传之后默认使用账号…...

编程日记 2023/10/6 2:12:03

【计算机组成原理】考研真题攻克与重点知识点剖析 - 第 2 篇：数据的表示和运算

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…...

编程日记 2023/10/6 2:11:01

使用maven框架搭建一个IDEA插件项目

以下是使用 Maven 框架搭建 IDEA 插件项目的步骤&#xff1a; 打开 IDEA&#xff0c;点击 File -> New -> Project&#xff0c;选择 Maven。 在弹出的 New Project 窗口中&#xff0c;选择 Maven&#xff0c;然后选择 Create from archetype&#xff0c;找到 Maven 插件…...

编程日记 2023/10/6 2:02:53

第二届全国高校计算机技能竞赛——C++赛道 题解

Powered by:NEFU AB-IN Link 文章目录 第二届全国高校计算机技能竞赛——C赛道A 互不侵犯题意思路代码 B 奖学金题意思路代码 C 领导者题意思路代码 D 空调题意思路代码 E 字符操作变换题意思路代码 第二届全国高校计算机技能竞赛——C赛道 A 互不侵犯 题意 在象棋中&#xff…...

编程日记 2023/10/6 2:01:51

八大排序源码（含优化）

文章目录 1、直接插入排序2、希尔排序3、选择排序4、冒泡排序5、堆排序6、快速排序快速排序递归实现霍尔法挖坑法前后指针法快速排序小区间优化 快速排序非递归实现 7、归并排序归并排序递归实现归并排序非递归 8、计数排序 大家好&#xff0c;我是纪宁&#xff0c;这篇文章是关…...

编程日记 2023/10/6 2:00:51

单调队列---数据结构与算法

简介 队列也是一种受限制的线性表和栈相类似&#xff0c;栈是先进后出&#xff0c;而队列是先进先出&#xff0c;就好像一没有底的桶&#xff0c;往里面放东西&#xff0c;如图 在这里也是用数组来实现队列&#xff0c;用数组实现的叫做顺序队列 队列的数组模拟 const int N…...

编程日记 2023/10/6 1:56:46

扬州市城乡建设网站/seo网络营销推广公司深圳

1、作用&#xff1a; RequestParam&#xff1a;将请求参数绑定到你控制器的方法参数上&#xff08;是springmvc中接收普通参数的注解&#xff09; 2、语法&#xff1a; 语法&#xff1a;RequestParam(value”参数名”,required”true/false”,defaultValue””) value&#xff…...

编程日记 2024/12/15 8:07:51

受欢迎的郑州网站建设/seo学习

关于转发跟重定向的区别&#xff0c;搜了一下&#xff0c;找到一篇我认为比较好点的博客&#xff0c;就转过来了&#xff0c;希望原博主不要生气┭┮﹏┭┮ 原文地址&#xff1a; 转发跟重定向的区别 https://blog.csdn.net/powerfulK/article/details/71069888 什么转发&a…...

编程日记 2024/12/15 5:47:54

萨隆wordpress/沈阳网站推广优化

Redis学习笔记&#xff08;1&#xff09;&#xff1a;Redis说明的安装 说明 什么是Redis REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统。Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、…...

编程日记 2024/12/15 0:05:30

dwcs2018怎么做动态网站/网址大全百度

本例在建立一个新的堆前后分别通过 GetProcessHeaps 函数获取了当前进程的堆句柄列表&#xff0c; 效果图&#xff1a; unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,Dialogs, StdCtrls;typeTForm1 class(TForm)Memo1…...

编程日记 2024/12/14 21:56:43

校园网站规划与建设/关键词优化seo优化

8_rabbitmq路由模式 更多干货 分布式实战&#xff08;干货&#xff09;spring cloud 实战&#xff08;干货&#xff09;mybatis 实战&#xff08;干货&#xff09;spring boot 实战&#xff08;干货&#xff09;React 入门实战&#xff08;干货&#xff09;构建中小型互联网企业…...

编程日记 2024/12/14 21:26:15

合肥网站设计机构/seo搜索引擎优化关键词

&#xff08;转载&#xff09;http://www.chinaz.com/program/2009/0123/64261.shtml即使开发一个新的大型PHP程序&#xff0c;你也不可避免的要使用到全局数据&#xff0c;因为有些数据是需要用到你的代码的不同部分的。一些常见的全局数据有&#xff1a;程序设定类、数据库连…...

编程日记 2024/12/14 20:06:22