vue3学习day01-vue3的优势、新的脚手架工具create-vue、创建vue3项目、vue3的项目文件内容、插件变化

news2024/11/14 21:24:27

1、vue3的优势

(1)更易维护:组合式api,更好的TypeScript支持

(2)更快的速度:重写diff算法,模版编译优化,更高效的组件化

(3)更小的体积:良好的TreeShaking,按需引入

(4)更优的数据响应式:更优的响应式

2、新的脚手架工具create-vue(底层切换到了vite,为开发提供极速响应)

3、创建vue3项目

(1)检查node版本(node -v)(支持16.0以上的版本)

(2)创建一个vue应用(npm init vue@latest)

        1)执行 npm init vue@latest,回车

        2)选y,回车

        3)输入项目名

回车:

        4)不添加typeScript语法

回车:

        5)不添加JSX

回车:

        6)不引入Vue Router

回车:

        7)不引入Pinia

        8)不引入Vitest

        9)不引入End to End

        10)引入EsLint

        11)不引入Prettier

        12)不引入Vue DevTools 7

回车:

        13)执行(cd vue3-demo1,npm install,npm run dev),启动服务

4、vue3的项目文件

(1)vite.config.js   -项目的配置文件,基于vite的配置

(2)package.json   项目包文件,核心依赖变成了vue3.x和vite

(3)main.js   入口文件,createApp函数创建应用实例

(4)index.html   单页入口,提供id为app的挂载点

(5)app.vue   根组件,SFC单文件组件script-template-style

变化:

        1)脚本script和模版template的顺序调整
        2)模版template不再要求单一根元素
        3)脚本script添加setup标识支持组合式API

5、插件变化

(1)点开App.vue,显示要更换插件(Vetur->Volar)

(2)禁用Vetur,安装Vue Official

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

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

相关文章

MES系统:生产实时监控与智能反馈,驱动制造业智能化升级

MES系统(Manufacturing Execution System,制造执行系统)通过集成多种技术手段和管理模块,实现了生产过程的实时监控与反馈。以下是实时监控与反馈具体实现的详细分析: 一、实时监控 1. 数据采集 传感器与设备集成&am…

nrm: npm 镜像源管理工具

nrm 是 “npm registry manager” 的缩写,是一个 npm 镜像源管理工具,用于在不同的 npm 镜像源之间快速切换,帮助开发者根据需要选择不同的源来加速包的下载或解决网络问题。 常用命令 详细介绍 以下是 nrm 的一些主要特性和用法&#xff1…

精美UI三方用户中心 新版QRuser用户中心主题 | 魔方财务模板

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 新版QRuser用户中心主题 | 魔方财务模板 本主题支持魔方财务3.5.7版本!可自由切换魔方财务3.5.7版本与其他版本。 本主题基于官方default开发,主要面向企业&…

Java语言程序设计——篇十一(1)

🌿🌿🌿跟随博主脚步,从这里开始→博主主页🌿🌿🌿 欢迎大家:这里是CSDN,我的学习笔记、总结知识的地方,喜欢的话请三连,有问题可以私信&#x1f33…

【数据结构-前缀哈希同余运算】力扣974. 和可被 K 整除的子数组

给定一个整数数组 nums 和一个整数 k ,返回其中元素之和可被 k 整除的非空 子数组 的数目。 子数组 是数组中 连续 的部分。 示例 1: 输入:nums [4,5,0,-2,-3,1], k 5 输出:7 解释: 有 7 个子数组满足其元素之和可…

仿真入门!Hypermesh焊接处理方法

某抗硫球阀为对焊端结构,需要焊接袖管。焊接过程产生的高温会造成热影响区域,尤其接头区域产生变形及残余应力,同时O型密封圈处的温度也是焊接生产比较关心的问题。因此,为弄清袖管焊接过程中温度场规律,给实际焊接生产…

RAID 级别:0、1、5、6、10 和 50 傻傻分不清?那是你没看过这篇

号主:老杨丨11年资深网络工程师,更多网工提升干货,请关注公众号:网络工程师俱乐部 早上好,我的网工朋友。 大家都知道,无论是企业级服务器还是个人计算机,数据的安全性和可用性都是至关重要的。…

通配符HTTPS证书快速申请流程

通配符HTTPS证书是一种特别类型的HTTPS证书,它可以为一个主域名及其下级所有子域名提供安全加密。这对于拥有多个子域名的企业来说非常有用,因为它简化了管理流程,并降低了成本。具体申请流程: 注册账号填写230919注册码即可获得…

【C++】实验十四

题目: 1、编写程序,输入a,b,c,检查a,b,c是否满足以下条件,如不满足,由cerr输出有关错误信息。 2、从键盘输入一批数值。要求保留3位小数,在输出时上下行小数…

成都夏光汝网络科技有限公司抖音小店品质与创新的完美结合

在数字经济蓬勃发展的今天,电商行业以其独特的魅力和无限的可能性,正深刻改变着我们的消费习惯与生活方式。其中,抖音小店作为短视频与电商结合的典范,更是以其独特的优势迅速崛起,成为广大消费者喜爱的购物渠道。成都…

企业版邮箱如何确保全球畅邮

企业版邮箱如何确保全球畅邮呢?一邮箱通过多项国际隐私认证,加密技术保障数据安全。二是全球网络部署确保邮件畅通。三提供灵活价格方案,支持用户定制化和跨平台。四是第三方工具集成,提升效率。 一、Zoho邮箱的安全保障 1.1 高…

【Stable Diffusion】影楼再也赚不到你的钱,让SD帮你“拍摄”艺术写真

前言 点击上方「蓝字」关注我们 你能看出下图是一张经过AI技术处理过的写真吗? 通过原图AI合成,简单几步操作,一个无需摄影无需后期的0成本摄影工作室就诞生了。 今天就来教大家怎么用Stable Diffusion做出这样的写真效果。 操作过程 第一…

IDEA使用Docker打包镜像

IDEA使用Docker打包镜像 Docker服务器 想要使用idea直接打包docker镜像,需要一个docker服务,你可以安装windows版本的docker,或者安装Linux版本的docker到虚拟机中,这个根据个人想法即可。本篇文章使用的是Linux! W…

一图搞懂,全流程项目管理实践地图,驱动:市场-研发-售后

如何共同协作驱动 市场研发售后? 软件项目交付需要一段时间和长周期,而由于产品研发团队前与市场部门脱节、后又与售后支撑服务团队脱节的话,整体上会加剧项目管理的成本和内部跨部门协作的难度。 如何高效共同协作驱动 市场运营产品研发售…

C# Solidworks二次开发------设置按键打开模型查询

一、代码 public void Open_File(string FileNmae) {Process.Start("explorer.exe", FileNmae); }Open_File("路径"); 二、内容 这个代码很简单,我使用其主要的作用是设置一个按键,可以快速的查看我们已生成的三维模型&#xff0…

2000-2023年上市公司融资约束指数-KZ指数(含原始数据+计算结果)

2000-2023年上市公司融资约束指数-KZ指数(含原始数据计算结果) 1、时间:2000-2023年 2、来源:上市公司年报 3、指标:证券代码、证券简称、统计截止日期、是否剔除ST或*ST或PT股、是否剔除上市不满一年、已经退市或被…

js数据类型基础

最近投了几家公司面试,其中有一家公司面试官面试我非常感谢他,感觉他像一位老师的角色对于我回答不上来的问题以及回答错误的问题耐心指导。js基础真的很重要!!面完之后我觉平常我只是看到了问题的表面,并没有深度的了…

基于SpringBoot的电商购物平台设计与实现-计算机毕设 附源码 06411

基于SpringBoot的电商购物平台设计与实现 摘 要 该电商购物平台基于SpringBoot开发,旨在为用户提供便捷的购物体验。注册功能允许用户通过提供账号、密码、昵称、邮箱等信息注册账户,而已注册用户可以使用用户名和密码登录系统。普通用户可以在首页查看…

钉钉机器人调度

钉钉机器人调度 流程操作钉钉开发者后台配置01 添加机器人获取APPKEY和APPSECRET获取权限开启消息推送 02 接收“问题”搭建接口 03 转发到服务器服务器的管理界面机器人配置界面将代码上传到服务器 04 API调度影刀提取数据配置信息--合法性 05 生成答案06 回传到服务器 流程 操…

WPF中添加布局拖拽功能 (添加GridSplitter)

1. 思想&#xff1a; 使用GridSplitter加到布局中&#xff0c;作为控件。 2. Xaml代码&#xff1a; <Windowx:Class"TestWPF_Func1207.TestRichTextBox"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schema…