【Vue3快速上手】

news2024/11/18 1:45:31

Vue3快速上手

  • 1 Vue3简介
  • 2 创建Vue3.0工程
    • 2.1 使用 vue-cli 创建
    • 2.2 使用 vite 创建

1 Vue3简介

  • github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0
  • Vue3带来了:
    1> 性能的提升:打包大小减少41%;初次渲染快55%、更新渲染快133%;内存减少54%……
    2> 源码的升级:使用Proxy代替defineProperty实现响应式;重写虚拟DOM的实现和Tree-Shaking……
    3> 拥抱TypeScript:Vue3可以更好的支持TypeScript
    4> 新的特性:
    在这里插入图片描述

2 创建Vue3.0工程

2.1 使用 vue-cli 创建

  • 官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli

在这里插入图片描述

## 创建
vue create vue_test

在这里插入图片描述
在这里插入图片描述

## 启动
cd vue_test
npm run serve

在这里插入图片描述

2.2 使用 vite 创建

  • 官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite
  • vite官网:https://vitejs.cn
    在这里插入图片描述
    在这里插入图片描述
## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

在这里插入图片描述

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

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

相关文章

[2023]Java后台开发工程师笔试题

这次试卷考察的都是偏基础的&#xff0c;而且没有编码题&#xff0c;很喜欢这家公司考察的方式&#xff0c;没有刻意求难&#xff0c;而是重基础&#xff0c;希望能达到这家公司的面试环节&#xff01;如果能拿到offer那就大大的好&#xff01;记录的主要是我不太会的 目录 单选…

mongodb聚合_删除_可视化工具

3.5 MongoDB中limit和skip MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录&#xff0c;可以使用MongoDB的Limit方法&#xff0c;limit()方法接受一个数字参数&#xff0c;该参数指定从MongoDB中读取的记录条数。limit()方法基本语法如下所示&#xff1a;…

蓝桥杯2020年5月青少组Python程序设计国赛真题

1、 上边是一个算法流程图,最后输出的b的值是() A.377 B.987 C.1597 D.2584 2、 3、如果整个整数X本身是完全平方数,同时它的每一位数字也都是完全平方数我们就称X 是完美平方数。前几个完美平方数是0、1、4、9、49、100、144......即第1个完美平方数是0,第2个是 1,第3个…

【AI】人工智能爆发推进器之卷积神经网络

目录 一、什么是卷积神经网络 1. 卷积层&#xff08;Convolutional Layer&#xff09; 2. 激活函数&#xff08;Activation Function&#xff09; 3. 池化层&#xff08;Pooling Layer&#xff09; 4. 全连接层&#xff08;Fully Connected Layer&#xff09; 5. 训练过程…

STM32 cubeMX 光敏电阻AD转化实验

文章代码使用 HAL 库。 文章目录 前言一、光敏电阻介绍二、光敏电阻原理图解析三、ADC采样介绍1. 工作原理&#xff1a;2. ADC精度&#xff1a; 四、STM32 cubeMX配置ADC采样五、代码编写总结 前言 实验开发板&#xff1a;STM32F051K8。所需软件&#xff1a;keil5 &#xff0c;…

从GPU到屏幕渲染

一、Graphics Processing Unit GPU为图形处理单元&#xff1b; 一般将GPU与CPU放在一起对比&#xff1a; CPU的强项是做逻辑运算&#xff0c;GPU的强项是做数学运算和图形渲染&#xff1b; 双方都是运算处理器&#xff0c;从结构上来讲都包含运算单元ALU、控制单元Control和缓…

【笔记】Spring的事务是如何回滚的/Spring的事务管理是如何实现的

Spring的事务是如何回滚的/Spring的事务管理是如何实现的 数据库&#xff08;Spring事务&#xff09; 1、建立连接、开启事务&#xff08;准备工作&#xff09; 2、进行sql操作&#xff08;业务逻辑&#xff09; 3、执行成功&#xff0c;则commit&#xff1b; 执行失败&#x…

【LLM】Qwen学习

安装依赖 pip install transformers4.32.0 pip install accelerate pip install tiktoken pip install einops pip install transformers_stream_generator0.0.4 pip install scipy pip install auto-gptq optimum使用 参见官方介绍 模型 模型结构 QwenBlock 打印模型 ##…

sparkstreamnig实时处理入门

1.2 SparkStreaming实时处理入门 1.2.1 工程创建 导入maven依赖 <dependency><groupId>org.apache.spark</groupId><artifactId>spark-streaming_2.12</artifactId><version>3.1.2</version> </dependency> <dependency…

K8S的二进制部署

K8S的源码包部署 搭建准备&#xff1a; k8smaster01&#xff1a;20.0.0.32 kube-apiserver kube-controller-manager kube-scheduler etcdk8smaster02&#xff1a;20.0.0.33 kube-apiserver kube-controller-manager kube-scheduler node节点01&#xff1a;20.0.0.34 …

Jenkins集成allure测试报告

前言 Allure框架是一个功能强大的自动化测试报告工具&#xff0c;不仅支持多种编程语言&#xff0c;而且能够完美的与各种集成工具结合&#xff0c;包括Jenkins&#xff0c;TeamCity&#xff0c;Bamboo&#xff0c;Maven等等&#xff0c;因此受到了很多测试人员的青睐&#xff…

Redis7快速入门

Docker安装Redis 指定密码&#xff1a; docker run --restartalways -p 6379:6379 --name redis -d redis:7.0.12 --requirepass zhangdapeng520不指定密码&#xff1a; docker run --restartalways -p 6379:6379 --name redis -d redis:7.0.12在真实的开发中&#xff0c;如…

【c++】入门1

c关键字 命名空间 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化&#xff0c;以避免命名冲突或名字污染&#xff…

C/C++图形化编程(1)

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 信念是一把无坚不摧的利刃&#xff01…

每日一题-----逆序字符串

大家好我是Beilef&#xff0c;在一个美好的下午我意外接触到编程并且产生了兴趣&#xff0c;哈哈我要努力成为一个跨界者&#xff0c;让我们一起加油吧O(∩_∩)O 文章目录 目录 文章目录 前言 大家好请上车 一、逆序字符串 题⽬描述&#xff1a; 输⼊⼀个字符串&#xff0c;写…

Node.js版本对比

目录 1. node版本与Npm版本对照表 2. node版本与node-sass版本对照表 3. node-sass与sass-loader版本对照表 1. node版本与Npm版本对照表 以往的版本 | Node.js 下面显示最新的对应内容&#xff0c;如果需要查找历史版本&#xff0c;可以进入上面的页面查询 VersionLTSDateV8np…

使用CRA(create-react-app)初始化一个完整的项目环境(该初始化项目已上传到本文章的资源)

1. 整理项目结构&#xff0c;项目目录结构大致划分如下&#xff1a; 2. 安装sass 安装sass开发环境, 注意&#xff1a;使用的文件后缀名要用.scssnpm i sass -D3. 安装Ant Design npm i antd --save 4. 配置基础路由Router&#xff08;具体可参考ReactRouter使用详解&#x…

Kerberos安装教程与命令详解(超详细)

文章目录 前言一、安装准备1. 搭建集群2. 软件包介绍 二、使用shell脚本一键安装1. 复制脚本2. 增加执行权限3. 执行脚本 三、kdb5_util命令1. 简介2. 可用选项和命令的解释3. 常见命令及其说明4. 示例用法 四、kadmin命令1. 简介2. 可用选项和命令的解释3. 常见命令及其说明4.…

渗透测试——1.4主动扫描

主动扫描是别人可以发觉的情报收集 一、nmap的使用 1.nmap<目标主机>:最常用的扫描方式 有nmap版本、扫描时间 “host is up”表示目标主机处于开机状态、“not shown”未开放端口 有四个端口是开的&#xff08;135.139.445.912&#xff09; 2.nmap -p<端口范围…

折叠屏,移动办公的第二战场

当下的移动办公&#xff0c;正在转换战场。 从PC端到移动端&#xff0c;大屏链接小屏&#xff0c;协作模式从单人到团队&#xff0c;移动办公领域一直在发展和自我更新&#xff0c;这也是硬件和软件企业共同开辟的“第一战场”。 如今&#xff0c;折叠屏带来了新形态&#xf…