首页 > 其他分享 >01 Vue3简介

01 Vue3简介

时间:2024-04-12 09:36:48浏览次数:22  
标签:vue cli No ## 简介 Add 01 Vue3 添加

介绍

性能的提升

  • 打包大小减少41%

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

  • 内存减少54%

源码的升级

  • 使用Proxy代替defineProperty实现响应式

  • 重写虚拟DOM的实现和Tree-Shaking

拥抱TypeScript

Vue3可以更好的支持TypeScript

新的特性

1. 组合是API(Composition API)

  • setup
  • refreactive
  • computedwatch
    ...

2. 新的内置组件

  • Fragment
  • Teleport
  • Suspense

3. 其他改变

  • 新的生命周期钩子
  • data 选项应始终被声明为一个函数
  • 移除keyCode支持作为 v-on 的修饰符

创建Vue3工程项目

【基于 vue-cli 创建】

点击查看官方文档

备注:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。

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

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve

基于 vite 创建】(推荐)

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

  • 轻量快速的热重载(HMR),能实现极速的服务启动。
  • TypeScriptJSXCSS 等支持开箱即用。
  • 真正的按需编译,不再等待整个应用编译完成。
  • webpack构建 与 vite构建对比图如下:
    image

具体操作如下(点击查看官方文档

注意:已安装 18.0 或更高版本的 Node.js

## 1.创建命令
npm create vue@latest

## 2.具体配置

## 配置项目名称
√ Project name: vue3_test

## 是否添加TypeScript支持
√ Add TypeScript?  Yes

## 是否添加JSX支持
√ Add JSX Support?  No

## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No

## 是否添加pinia环境
√ Add Pinia for state management?  No

## 是否添加单元测试
√ Add Vitest for Unit Testing?  No

## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No

## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes

## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

标签:vue,cli,No,##,简介,Add,01,Vue3,添加
From: https://www.cnblogs.com/songxia/p/18130456

相关文章

  • Maya 2019.2 Mtoa 无法正常加载并报错
    事件起因:在开始安装Maya2019.2时自动安装的Mtoa的版本为5.3.1,但是在插件管理器里无法启用插件,于是乎去网上下了一个低的版本5.1.1,虽然可以使用但是渲染出来的东西不能用;于是乎我又去网上下载了同样的5.3.1的独立安装包,然后安装破解(注意,这里有个坑,后续揭晓为什么),但是并无......
  • RAG应用开发实战(01)-RAG应用框架和解析器
    1开源解析和拆分文档第三方的工具去对文件解析拆分,去将我们的文件内容给提取出来,并将我们的文档内容去拆分成一个小的chunk。常见的PDFwordmarkdown,JSON、HTML。都可以有很好的一些模块去把这些文件去进行一个东西去提取。优势支持丰富的文档类型每种文档多样化选择与......
  • 手把手教你做阅读理解提高001-Camping:Finding Myself and Growing Strong-露营:在成长
    PDF格式公众号回复关键字:ZKYDT001阅读理解技巧,在帮助读者有效获取和理解文本信息方面发挥着重要作用,熟练掌握如下6个技巧,可快速突破阅读理解1预览文章结构在开始深入阅读之前,快速浏览文章的标题、段落开头和结尾,可以迅速把握文章的主题、大致内容和结构标题通常能概括文......
  • [转帖][译] 使用 Linux tracepoint、perf 和 eBPF 跟踪数据包 (2017)
    http://arthurchiao.art/blog/trace-packet-with-tracepoint-perf-ebpf-zh/ 译者序本文翻译自2017年的一篇英文博客 Tracingapacket’sjourneyusingLinuxtracepoints,perfandeBPF ,并添加了章节号以方便阅读。由于译者水平有限,本文不免存在遗漏或错误之处。如......
  • SDL简介
    作用SDL(SimpleDirectMediaLayer)库的作用,说白了就是封装了复杂的视音频交互工作,简化了视音频处理的难度特点跨平台开源结构SDL结构如下所示。可以看出它实际上还是调用了DirectX等底层API完成了和硬件的交互SDL的工作过程SDL视频显示的数据结构SDL_Window:代......
  • 01_在NET中使用RabbitMQ
    1.Linux上安装Docken服务器系统版本以及内核版本:cat/etc/redhat-release查看服务器内核版本:uname-r安装依赖包:yuminstall-yyum-utilsdevice-mapper-persistent-datalvm2设置阿里云镜像源:yum-config-manager--add-repohttps://mirrors.aliyun.com/docker-ce/linu......
  • [题解] <NOIP2017> 时间复杂度
    [题解]NOIP2017时间复杂度题目描述小明正在学习一种新的编程语言A++,刚学会循环语句的他激动地写了好多程序并给出了他自己算出的时间复杂度,可他的编程老师实在不想一个一个检查小明的程序,于是你的机会来啦!下面请你编写程序来判断小明对他的每个程序给出的时间复杂度是否正......
  • 计算机简介
    计算机计算机硬件一些物理装置按系统结构的要求构成一个有机整体为计算机软件运行提供物质基础计算机硬件组成CPU主板内存电源,主机箱硬盘显卡键盘,鼠标显示器等......冯.诺依曼体系结构计算机软件计算机软件可以使计算机按照事先预定好的顺序完成特定的功能计......
  • 蓝桥杯2016国赛-路径之谜
    0.题目小明冒充X星球的骑士,进入了一个奇怪的城堡。城堡里边什么都没有,只有方形石头铺成的地面。假设城堡地面是nxn个方格。【如图1.png】所示。按习俗,骑士要从西北角走到东南角。可以横向或纵向移动,但不能斜着走,也不能跳跃。每走到一个新方格,就要向正北方和正西方各射一......
  • ESP01S固件烧录出现2-syncfail报错
    起因整理手上开发板的时候突然发现有几片ESP01S和ESP12F买来一直没有使用,所以打算拿出来使用MQTT服务进行透传,但是在测试ESP01S的时候发现MQTT的指令一直在报错,之后一查固件版本号居然显示2015年构建的,所以从安信可处下载了新固件进行烧录.故障现象一直显示等待上电同步或显示......