创建vue3工程

一、新建工程目录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 插件,运行服务。

效果如下

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

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

相关文章

国庆加速度!新增功能点锁定功能,敏捷开发新增估算功能,助力项目快速突破!

大家好&#xff0c;CoCode开发云旗下Co-Project V3.6智能项目管理平台正式发布&#xff0c;平台新增功能点锁定功能、敏捷开发模式新增估算板块和两种估算方式。 功能点锁定功能进一步提高了项目估算的灵活性和准确性&#xff0c;有利于提高项目估算效率&#xff1b;而敏捷开发…

JAVA面经整理(8)

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

六、互联网技术——数据存储

文章目录 一、存储系统层次结构二、按照重要性分类三、磁盘阵列RAID三、RAID基础四、磁盘阵列分级五、数据备份与恢复六、容灾与灾难恢复 一、存储系统层次结构 常见的三层存储体系结构如下图所示&#xff0c;分为高速缓冲存储器、主存储器和外存储器。 二、按照重要性分类 …

Android自定义Drawable---灵活多变的矩形背景

Android自定义Drawable—灵活多变的矩形背景 在安卓开发中&#xff0c;我们通常需要为不同的按钮设置不同的背景以实现不同的效果&#xff0c;有时还需要这些按钮根据实际情况进行变化。如果采用编写resource中xml文件的形式&#xff0c;就需要重复定义许多只有微小变动的资源…

CSDN Q: “这段代码算是在STC89C52RC51单片机上完成PWM呼吸灯了吗?“

这是 CSDN上的一个问题 这段代码算是在STC89C52RC51单片机上完成PWM呼吸灯了吗&#xff0c;还是说得用上定时器和中断函数#include <regx52.h> 我个人认为: 效果上来说, 是的! 码以 以Time / 100-Time 调 Duty, 而 for i loop成 Period, 加上延时, 实现了 PWM周期, 虽然…

【LeetCode热题100】--34.在排序数组中查找元素的第一个和最后一个位置

34.在排序数组中查找元素的第一个和最后一个位置 二分查找中&#xff0c;寻找 leftIdx 即为在数组中寻找第一个大于等于 target 的下标&#xff0c;寻找 rightIdx 即为在数组中寻找第一个大于 target 的下标&#xff0c;然后将下标减一。进行两次查找 class Solution {public …

43 验证二叉搜索树

验证二叉搜索树 理解题意&#xff1a;验证搜索二叉树&#xff1a;中序遍历是升序题解1 递归&#xff08;学习学习&#xff01;&#xff09;题解2 中序遍历&#xff08;保持升序&#xff09; 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个 有效的二叉搜索树。 有…

Flutter项目安装到Android手机一直显示在assembledebug

问题 Flutter项目安装到Android手机一直显示在assembledebug 原因 网络不好&#xff0c;gradle依赖下载不下来 解决方案 修改如下的文件 gradle-wrapper.properties 使用腾讯提供的gradle镜像下载 distributionUrlhttps://mirrors.cloud.tencent.com/gradle/gradle-7.5…

mac openssl 版本到底怎么回事 已解决

在mac 安装node多版本的时候&#xff0c;有可能把原有的 openssl1.1 版本 直接要再一次升级了&#xff0c;无奈的 php环境 编译器是 openssl 1.1 还是 3.0 &#xff0c;今天来个底朝天的找问题。 brew search openssl 有安装 三个版本。 但是错误提示 是第二个版本。 brew …

十月四日作业

1、服务器 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务器头文件 #include <QTcpSocket> //客户端头文件 #include <QList> //链表容器 #include <…

git 提交代码,解决分支冲突,合并分支

克隆代码 git clone 仓库地址 克隆指定分支 git clone -b 分支名称 仓库地址 上传到分支上 1.克隆代码&#xff1a;git clone 仓库地址 注意&#xff1a;克隆仓库&#xff0c;会自动连接远程仓库的 2.修改代码完毕 3.git init 4.创建分支&#xff1a;git branch 分支名称 5…

Spring — 三级缓存和 循环依赖

置顶 学习专栏&#xff1a;【Java后端面试题】 1.Java面试题—基础知识、面向对象、【容器】、IO & 【设计模式】、泛型 & 异常 & 反射 & 注解、快速排序2.Java面试题—并发基础、【同步 & 互斥】、JUC & 并发容器、【线程池】、异步编程、【Lambda表达…

传输层协议—TCP协议

传输层协议—TCP协议 文章目录 传输层协议—TCP协议TCP协议段格式四位首部长度TCP协议如何根据目的端口号将数据传输给指定进程&#xff1f;32位序列号和32位确认序列号可靠性问题 TCP报头标志位16位紧急指针16位检验和确认应答机制超时重传机制再谈三次握手四次挥手 连接管理机…

什么是数学建模(mooc笔记)

什么是数学建模 前提&#xff1a;我们数学建模国赛计划选择C题&#xff0c;故希望老师的教学中侧重与C题相关性大的模型及其思想进行培训。之后的学习内容中希望涉及以下知识点&#xff1a; logistic回归相关知识点。如&#xff1a;用法、适用、限制范围等。精学数学建模中常…

常见的锁策略

目录 一.乐观锁 vs 悲观锁 二.轻量级锁 vs 重量级锁 三.自旋锁 vs 挂起等待锁 四.互斥锁 vs 读写锁 五.可重入锁 vs不可重入锁 一.乐观锁 vs 悲观锁 悲观锁 : 总是假设最坏的情况&#xff0c;每次去拿数据的时候都认为别人会修改&#xff0c;所以每次在拿数据的时候都会上锁…

448. 找到所有数组中消失的数字

题目描述 给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 示例 1&#xff1a; 输入&#xff1a;nums [4,3,2,7,8,2,3,1] 输出&#xff1a;[5,6…

php单独使用think-rom数据库 | thinkphp手动关闭数据库连接

背景&#xff08;think-orm2.0.61&#xff09; 由于需要长时间运行一个php脚本&#xff0c;而运行过程并不是需要一直与数据库交互&#xff0c;但thinkphp主要是为web站点开发的框架&#xff0c;而站点一般都是数据获取完则进程结束&#xff0c;所以thinkphp没提供手动关闭数据…

linux 基础知识3---上下文

1、什么是上下文切换? 用户态进入内核态时,进程要传递很多变量、参数给内核, 内核态也要保存用户进程的一些寄存器值,变量等。所谓的进程上下文,可以看作是用户进程传递给内核的这些参数以及内核要保存的那一套的变量和寄存器和当时的环境等。 一个进程上下文分为三个部…

设计模式——10. 组合模式

1. 说明 组合模式是一种结构型设计模式,用于将对象组合成树状结构以表示“部分-整体”的层次结构。它允许客户端以一致的方式处理单个对象和组合对象(包含多个对象的容器),使得客户端无需关心它们之间的差异。 组合模式通常涉及两种主要角色: 叶子节点(Leaf):这是组合…

JAVA学习(5)-全网最详细~

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…