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

变化

        相对于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

        放置组件的文件

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python:如何对FY3D TSHS的数据集进行重投影并输出为TIFF文件以及批量镶嵌插值?

完整代码见 Github:https://github.com/ChaoQiezi/read_fy3d_tshs,由于代码中注释较为详细,因此博客中部分操作一笔带过。 01 FY3D的HDF转TIFF 1.1 数据集说明 FY3D TSHS数据集是二级产品(TSHS即MWTS/MWHS 融合大气温湿度廓线/稳定度指数/…

ssm“最多跑一次”微信小程序

采用技术 ssm“最多跑一次”微信小程序的设计与实现~ 开发语言:Java 数据库:MySQL 技术:SpringMVCMyBatis 工具:IDEA/Ecilpse、Navicat、Maven 系统实现的功能 本次设计任务是要设计一个“最多跑一次”微信小程序,…

【攻防世界】php_rce (ThinkPHP5)

进入题目环境,查看页面信息: 页面提示 ThinkPHP V5,猜测存在ThinkPHP5 版本框架的漏洞,于是查找 ThinkPHP5 的攻击POC。 构造 payload: http://61.147.171.105:50126/?sindex/think\app/invokefunction&functioncall_user_f…

JVM-结合MAT工具分析OOM问题

JVM-结合MAT工具分析OOM问题 启动项目前配置VM参数 -XX:UseParNewGC -XX:UseConcMarkSweepGC -Xms1m #初始化大小 -Xmx1m #最大值 -XX:PrintGCDetails -Xloggc:gc_dandan.log -XX:HeapDumpOnOutOfMemoryError -XX:HeapDumpPath./运行结果截图 使用MAT打开java_pid12164.hprof…

开源铱塔切换MySQL数据库启动报异常

1.错误日志: 铱塔切换数据库配置为MySQL之后,启动后报错如下: SqlExceptionHelper - Table iotkit.task_info doesnt exist SqlExceptionHelper - Table iotkit.rule_info doesnt exist SqlExceptionHelper - Table iotkit.device_info does…

【Java8新特性】二、函数式接口

这里写自定义目录标题 一、什么是函数式接口二、自定义函数式接口三、作为参数传递 Lambda 表达式四、四大内置核心函数式接口1、消费形接口2、供给形接口3、函数型接口4、断言形接口 一、什么是函数式接口 只包含一个抽象方法的接口,称为函数式接口。你可以通过 L…

1、JVM相关知识点-类加载机制

JVM类加载机制 当我们用java命令运行某个类的main函数启动程序时,首先需要通过 类加载器 把主类加载到 JVM 通过Java命令执行代码的大体流程如下: 其中loadClass的类加载过程有如下几步: 加载 >> 验证 >> 准备 >> 解析 &…

Nginx反向代理与Tomcat实现ssm项目前后端分离部署

Nginx nginx是一款http和支持反向代理的web服务器,以其优越的性能被广泛使用。以下是百度百科的介绍。 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.…

解析大语言模型训练三阶段

大语言模型的训练过程一般包括3个阶段:预训练(Pre-training)、SFT(有监督的微调,Supervised-Finetuning)以及RLHF(基于人类反馈的强化学习,Reinforcement Learning from Human Feedb…

maxpool long数据类型报错

报错: RuntimeError: “max_pool2d” not implemented for ‘Long’ 源码: import torch from torch import nn from torch.nn import MaxPool2dinput torch.tensor([[1, 2, 0, 3, 1],[0, 1, 2, 3, 1],[1, 2, 1, 0, 0],[5, 2, 3, 1, 1],[2, 1, 0, 1, 1…

【uniapp】多端打包(h5...)

1. h5 HBuilder X -> 项目目录中manifest.json 发行 查看打包文件(用浏览器打开就行了)或者直接运行在浏览器中

android支付宝接入流程

接入前准备 接入APP支付能力前,开发者需要完成以下前置步骤。 本文档展示了如何从零开始,使用支付宝开放平台服务端 SDK 快速接入App支付产品,完成与支付宝对接的部分。 第一步:创建应用并获取APPID 要在您的应用中接入支付宝…

idea中jdk版本的配置

配置JDK版本的步骤如下: 下载JDK安装文件:首先,需要从Oracle官方网站(https://www.oracle.com/java/technologies/javase-jdk8-downloads.html)下载适合您操作系统的JDK版本。 安装JDK:双击下载的安装文件…

unity按路径移动

using System; using System.Collections; using System.Collections.Generic; using UnityEngine;public class FollowPathMove : MonoBehaviour {public Transform[] wayPointArray;[SerializeField] private Transform PathA;//路径点的父物体[SerializeField]private Trans…

【学习 在服务器上使用bypy直接下载百度云盘的资源。

参考:bypy 具体步骤 step1: pip install bypystep2: bypy info第一次输入该命令, 点击进入网址,点击登陆后,获取token(10分钟内有效),然后输入到命令行:…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第二套

华为海思校园招聘-芯片-数字 IC 方向 题目分享(共9套,有答案和解析,答案非官方,未仔细校正,仅供参考)——第二套(共九套,每套四十个选择题) 部分题目分享,完整版获取&am…

真实世界的映照-DDD实体

什么是实体? 实体,官方的解释是:实体(Entity,又称为Reference Object)很多对象不是通过他们的属性定义的,而是通过一连串的连续事件和标识定义的。主要由标识定义的对象被称为ENTITY。 但&…

人工智能——机器学习概述

1. 人工智能 1.1. 概念 人工智能(Artificial Intelligence,AI),是新一轮科技革命和产业变革的重要驱动力量, [26]是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 人工智能是智能学科重要的组…

ChromeDriver / Selenium-server

一、简介 ChromeDriver 是一个 WebDriver 的实现,专门用于自动化控制 Google Chrome 浏览器。以下是关于 ChromeDriver 的详细说明: 定义与作用: ChromeDriver 是一个独立的服务器程序,作为客户端库与 Google Chrome 浏览…

GFS部署实验---gfs9.6版本---网络源安装

目录 1、部署环境 2、更改节点名称 3、准备环境 4、做主机映射--/etc/hosts/ 5、yum网络源直接安装客户端软件 1.安装公网源 2.安装服务 3.开启服务 6、添加节点到存储信任池中 7、创建卷 1、创建数据目录 2、创建分布式卷 3、创建复制卷 4、创建分布式复制卷 5、…