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

创建vue3工程

news 2026/2/9 1:51:32

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/7 23:18:37

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/28 10:02:54

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43