Vue3---基础1(认识,创建)

news2024/10/7 4:33:49

变化

        相对于Vue2,Vue3的变化:

        性能的提升

                打包大小减少 41%

                初次渲染快 55%,更新渲染快133%

                内存减少54%

        源码的升级

                使用 proxy 代替 defineProperty 实现响应式

                重写虚拟 DOM 的实现和 Tree-shaking

        TypeScript

                Vue3就可以更好的支持TypeScript

        新的特性

                1. Composition API (组合式API):

                        setup

                        ref 与 reactive

                        computed 与 watch

                        ......

                2. 新的内置组件

                        Fragment

                        Teleport

                        Suspense

                        ......

                3. 其他改变

                        新的生命周期钩子

                        data 选项应始终被声明为一个函数

                        移出 keyCode 支持作为 v-on 的修饰符                

创建 Vue3 工程

基于 vue-cli 创建

        脚手架是 webpack 

        目前 vue-cli 处于维护模式,官方推荐基于 vite 创建项目

## 查看 @vue/cli 版本, 确保在4.5.0以上
vue -version

## 安装/升级
npm i -g @vue/cli

## 执行创建命令
vue create vue_text

## 选择 3.x

## 启动

基于 vite 创建(推荐)

        vite 是新一代的前端构建工具,官网地址: https://vitejs.cn, 优势如下:

        轻量快速的热重载(HMR),能实现极速的服务启动

        对 TypeScript、JSX、CSS 等支持开箱即用

        真正的按需编译,不需要等待整个应用编译完成

        创建

## 创建命令
npm create vue@latest

## 配置
 ---略

        文件

        

extensions.json        里面是vscode内的插件

favicon.ico                是网页标题左侧图标

.gitignore                  忽略文件

env.d.ts                     让ts认识其他文件的配置(报红是缺少依赖  npm i 一下)

index.html                入口文件

package-lock.json

package.json           这两个是包的管理文件

README.md           工程介绍

tsconfig.app.json

tsconfig.json

tsconfig.node.json   这三个是ts的配置文件

vite.config.ts            整个工程的配置文件(安装插件、配置代理)

        插件

        下载安装插件:

        TypeScript Vue Plugin(Volar)

        Vue Language Features(Volar)// 这个换成 Vue - Official

src

        main.ts

        入口文件 index.html 引入了 src 内的 main.ts

components

        放置组件的文件

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

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

相关文章

Harmony鸿蒙南向驱动开发-MMC

MMC(MultiMedia Card)即多媒体卡,是一种用于固态非易失性存储的小体积大容量的快闪存储卡。 MMC后续泛指一个接口协定(一种卡式),能符合这种接口的内存器都可称作MMC储存体。主要包括几个部分:…

【java工具-灵活拉取数据库表结构和数据】

需求: 假设我们现在有一个需求,需要快速拉取数据库的某些表建表语句,和数据,平时做备份之类; 我这边自己写了个工具,不多废话,也不整虚的, 直接看代码: package com.…

SQL注入sqli_labs靶场第五、六题

第五题 根据报错信息,判断为单引号注入 没有发现回显点 方法:布尔盲注(太耗时,不推荐使用) 1)猜解数据库名字:(所有ASCII码值范围:0~127) ?id1 and length…

Redis从入门到精通(四)Redis实战(一)短信登录

文章目录 前言第4章 Redis实战4.1 短信登录4.1.1 基于session实现短信登录4.1.1.1 短信登录逻辑梳理4.1.1.2 创建测试项目4.1.1.3 实现发送短信验证码功能4.1.1.4 实现用户登录功能4.1.1.5 实现登录拦截功能4.1.1.6 session共享问题 4.1.2 基于Redis实现短信登录4.1.2.1 Key-Va…

Web3 游戏周报(3.31-4.6)

【3.31-4.6】Web3 游戏行业动态: Xai 基金会宣布与 Reboot 达成合作拟支持 Pixel Vault: BattiePlan 游戏生态迁移 加密游戏 Hytopia 在节点销售获得 800 万美元后将于本月推出测试版 新加坡 Web3 游戏初创公司 Gomble Games 完成 1,000 万融资 NFT 卡牌游戏 Par…

PyCharm+PyQt5配置方法

一、前言 PyQt5PyQt5是一套Python绑定Digia QT5应用的框架。Qt库是最强大的GUI库之一PyQt5-toolsPyQt5中没有提供常用的Qt工具,比如图形界面开发工具Qt Designer,PyQt5-tools中包含了一系列常用工具Qt Designer可以通过Qt Designer来编写UI界面&#xf…

SPI外设简介

SPI外设简介 简介部分 可配置8/16位数据帧、高位先行/低位先行 SPI和I2C都是高位先行,串口是低位先行 PCLK是外设时钟,APB2是72MHz、APB1是36MHz SPI1的时钟频率比SPI2的大一倍 如果需要快速大量传输数据,可以使用DMA数据转运&#xff0…

Chrome谷歌下载入口

​hello,我是小索奇 发现好多人说谷歌浏览器在哪里下载呀,哪里可以找到? 你可能会心想,一个浏览器你还不会下载啊? 还真是,有很多伙伴找不到下载入口,为什么呢? Bing进行搜索&am…

2、java语法之循环、数组与方法(找工作版)

写在前面:整个系列文章是自己学习慕课相关视频,进行的一个总结。文章只是为了记录学习课程的整个过程,方便以后查漏补缺,找到对应章节。 文章目录 一、Java循环结构1、while循环2、do-while循环3、for循环4、嵌套循环5、break语句…

【技术揭秘】爬取网站或APP应用的几种常用方案:RPA、抓包工具、Python爬虫,你了解多少?

本来准备空闲之余尝试用RPA软件抓取数据,【AIRPA系列】1、利用AIRPA提升工作效率 应用场景 , 最近工作项目有点忙, RPA实操系列可能会晚点了(自己真正实操后再写,copy别人的没啥意思)。这里简单整理下爬取…

Docker快速上手及常用命令速查

Docker快速上手 安装 在ubuntu上安装docker: sudo apt-get install docker docker -v #查看版本在centos7上安装docker:(docker在YUM源的Extras仓库中) yum install docker systemctl start dockerdocker常用命令速查 #查看docker信息 docker info #查看本地镜…

【面试题】redis在工作中的使用场景有哪些?

前言:在实际工作中,Redis作为一种高性能的内存数据库和缓存系统,可以应用于多种场景,同时在面试过程中也经常被问到类似的问题,我们经常会被问的一脸懵逼,那今天我们就来总结一下redis的一些使用场景。 数据…

Linux--进程间的通信-匿名管道

进程间的通信 进程间通信(IPC,Interprocess Communication)是指在不同进程之间传输数据和交换信息的一种机制。它允许多个进程在同一操作系统中同时运行,并实现彼此之间的协作。 进程间通信方式: 管道(Pi…

前端开发中地图定位与距离计算的应用实践

前端开发中地图定位与距离计算的应用实践 在前端开发中,地图功能的应用日益广泛,无论是用户位置的定位、目标距离的计算,还是地址的解析与展示,地图都发挥着不可替代的作用。本文将重点介绍前端开发中实现地图定位、距离计算以及…

电销卡呼叫必须录音吗

在现代的销售策略中,电话销售(电销)扮演着至关重要的角色。为了提高电销效率和质量,许多企业采用了电销卡来进行日常的电话营销活动。电销卡通常指的是专为电话销售设计的电话号码或线路,它们通常具备一些特殊的功能&a…

agi入门-大模型开发基础

AGI(Artifical General Inteligence)的到来还有多久? 乐观预测:明年主流预测:3-5年悲观预测:10年 AGI时代,AI无处不在,相关从来者将如何分? AI使用者:使用别人开发的AI产品AI产品…

精准识别更安全,横扫六大手指难题的鹿客指脉锁S6 Max来了

极致的自然动作、极致的精准识别、识别时间600毫秒……在4月10日鹿客指脉锁S6 Max发布会上,高密度的关键词让关注发布会的所有人都意识到,下一代智能锁真的来了。 鹿客也将新品S6 Max称为“行业内、搭载全新一代指脉技术的革新之作”。 1、十年回答&…

idea中输入法被锁定如何清除

今天遇到一个问题?idea中输入法被锁定了,无论怎么切换输入法,切换中英文,在idea中输出的均为英文内容,该如何解决呢?(idea官网:JetBrains: 软件开发者和团队的必备工具) …

VPP 负载均衡测试代码

1. 均衡的测试思想和流程说明。 先说一下理论, 然后后边才知道 代码逻辑。 调试了两天,这个代码终于通了。 由于时间关系, 画了一个粗略的图。另外这个代码只是流程通了,不过要帮助理解负载均衡我认为已经足够了。 下面是windo…

three.js尝试渲染gbl模型成功!(三)

参照教程:https://cloud.tencent.com/developer/article/2276766?areaSource102001.5&traceId88k805RaN_gYngNdKvALJ (作者:九仞山) 通过最近两天查three.js入门教程了解到 这玩应支持包括 .obj、.gltf等类型的模型结构。 g…