15-创建Vue3.0工程

news2024/10/7 20:24:52

目录

  • 1.使用 vue-cli 创建
  • 2.使用 vite 创建

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.使用 vite 创建

官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网:https://vitejs.cn

  • 什么是vite?—— 新一代前端构建工具。

优势如下:

  • 开发环境中,无需打包操作,可快速的冷启动。
  • 轻量快速的热重载(HMR)。
  • 真正的按需编译,不再等待整个应用编译完成。

传统构建 与 vite构建对比图:

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

传统构建:

  • 在传统构建中刚开始是空的,需要将所有文件进行打包完毕,才启动开发服务器。

  • 如果我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。

  • 包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器。

  • 即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

vite构建:

  • Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。

  • 在vite构建中刚开始就骗你这里已经打包完毕了(其实它根本就没有打包),然后在根据需求进行按需编译,大大提高了编译效率。

使用vite创建工程:

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

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

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

相关文章

创建孔、缩放、复制和粘贴

创建孔 项目概况&#xff1a; 在本项目中&#xff0c;您将学习如何使用孔特征从另一个形状中去除材料。 在Tinkercad上查看整个项目 指示 将蓝色多边形形状拖动到工作平面上&#xff0c;并将其放置在以橙色勾勒的区域。 提示&#xff1a; 您可能需要向下滚动形状列表才能找到…

kendoUI中的Observable详解

kendoUI中的Observable方法 一、前言 Kendo UI是一个基于JavaScript的开源UI框架&#xff0c;它提供了一系列的UI组件和工具&#xff0c;包括表格、图表、表单、对话框等。Kendo UI中的Observable是一个非常重要的概念&#xff0c;它可以帮助我们更好地理解和使用Kendo UI。 …

如何把握住数字化时代的浪潮,数据要素是关键

随着美国、欧洲的数字、数据战略相继出现&#xff0c;这意味着数据在未来的价值已经不是什么秘密&#xff0c;而是对未来世界发展的共识。IDC曾经预测过到2025年中国产生的数据总量将会达到48.6ZB&#xff0c;占全球的27.8%。这就是在未来发展数据战略的底气&#xff0c;也标志…

二叉树详解:带你掌握二叉树

目录 前言1. 树型结构1. 1 树的概念1.2 树的特点1.3 树的相关术语 2. 二叉树&#xff08;binary tree&#xff09;2.1 二叉树的概念2.2 二叉树中的特殊树2.2.1 满二叉树2.2.2 完全二叉树 2.3 二叉树的性质 3. 二叉树的遍历3.1 前序遍历3.2 中序遍历3.3 后序遍历3.4 层序遍历 总…

基于matlab使用蒙特卡罗模拟生成雷达系统的接收机工作特性 (ROC) 曲线

一、前言 此示例说明如何使用蒙特卡罗模拟生成雷达系统的接收机工作特性 &#xff08;ROC&#xff09; 曲线。接收器工作特性决定了系统在目标不存在&#xff08;误报&#xff09;时抑制大杂散信号值时检测目标的能力。检测系统将通过将接收到的信号值与预设阈值进行比较来声明…

Angular学习笔记:environment.ts文件

本文是自己的学习笔记&#xff0c;主要参考资料如下。 - B站《Angular全套实战教程》&#xff0c;达内官方账号制作&#xff0c;https://www.bilibili.com/video/BV1i741157Fj?https://www.bilibili.com/video/BV1R54y1J75g/?p32&vd_sourceab2511a81f5c634b6416d4cc1067…

网络监控工具

网络监控是一项重要的 IT 操作&#xff0c;可控制网络中的危险信号&#xff0c;并有助于避免潜在的业务问题。网络监控工具提供有关网络可用性和运行状况的见解&#xff0c;并跟踪 CPU 使用率、延迟和数据包丢失等关键性能指标&#xff0c;使管理员能够全面了解网络。 为什么网…

Kafka Schema-Registry

一、为什么需要Schema-Registry 1.1、注册表 无论是 使用传统的Avro API自定义序列化类和反序列化类 还是 使用Twitter的Bijection类库实现Avro的序列化与反序列化&#xff0c;这两种方法都有一个缺点&#xff1a;在每条Kafka记录里都嵌入了schema&#xff0c;这会让记录的大…

持续集成部署-微前端 镜像可以有多小?

微前端 镜像可以有多小&#xff1f; 1. 需求2. 开整 1. 需求 目前项目前端的镜像大小基本在 150M 左右&#xff0c;试下能不能缩小到 20M&#xff1f; 看了下前端打包后的压缩包只有 几 兆&#xff1b; 想着有空调试下&#xff0c;第一反应应该是使用 alpine 镜像&#xff0…

Delving into Shape-aware Zero-shot Semantic Segmentation(CVPR2023)

文章目录 摘要本文方法Pixel-wise Vision-Language AlignmentShape ConstraintSelf-supervised Spectral Decomposition推理 实验结果 摘要 由于大规模视觉语言预处理取得了令人瞩目的进展&#xff0c;最近的识别模型可以以零样本和开放集的方式对任意对象进行分类&#xff0c…

WIKIBON:大模型炒作中,有哪些云与AI的新趋势?

进入2023年以来&#xff0c;以ChatGPT为代表的大模型喧嚣引发了AI的新一轮炒作热潮&#xff0c;堪比当年的加密货币。不同的是&#xff0c;以微软、NVIDIA、AWS、Google等为代表的云与芯片大厂纷纷实质性入局大模型&#xff0c;为大模型AI注入持续的生命力。因此ChatGPT可类比于…

【网络原理】TCP/IP四层模型中的重点网络协议

目录 &#x1f31f;一、应用层协议 &#x1f308;1、XML协议 &#x1f308; 2、JSON &#x1f308; 3、其他协议 &#x1f31f;二、传输层协议&#xff08;UDP与TCP重点&#xff09; &#x1f308;1、UDP协议格式 &#x1f308; 2、TCP协议格式 &#x1f389;TCP的10条…

字母钥匙圈

钥匙圈&#xff0c;字母&#xff01; 项目概况&#xff1a; 在这个项目中&#xff0c;您将学习使用字母制作钥匙圈&#xff01; 放置字母 是时候发挥创意了。为您的朋友或您自己设计一个。 指示 首先将字母拖到红色底座上&#xff08;位于“设计入门”>“字母和数字”下…

RESTful Python

RESTful Python是一种使用Python编程语言实现RESTful API的方法。下面是一些常用的Python库和框架&#xff0c;可以用来创建RESTful API: Flask&#xff1a; Flask是一个轻量级的Python Web框架&#xff0c;可以用来创建RESTful API。它具有灵活、易于使用和快速开发的特点。 …

[数据库]关于数据库设计的原则

数据表设计原则: 自动编号的ID应该设计为bigint&#xff0c;因为int可能不够用&#xff0c;并且&#xff0c;为了便于统一管理&#xff0c;写的舒心不出错&#xff0c;建议所有表的自增ID全部使用bigint 。&#xff08;缺点是占空间&#xff0c;如果有20亿条数据&#xff0c;浪…

地震勘探基础(二)之地震分辨率

地震分辨率 分辨率&#xff08;resolution&#xff09;表示分离出两个十分靠近的物体的能力&#xff0c;一般用距离表示。如果两个物体之间的距离大于某个特定距离时可以分辨出是两个分离的物体&#xff0c;小于这个特定距离时就不再能分辨出是两个物体&#xff0c;那么这个特…

电压放大器在超声波测距仪中的应用实例研究

超声波测距仪是一种用于测量距离的设备&#xff0c;其原理是利用超声波在空气中传播的速度和反射特性来计算距离。而电压放大器则是超声波测距仪中的一个重要组成部分&#xff0c;它可以将超声波信号放大到足够强的水平&#xff0c;以便于后续处理和显示。本安泰电子将为大家介…

【学习日记2023.6.1】数据库隔离级别

1. 数据库隔离级别 1.1 事务 事务只是一个改变&#xff0c;是一些操作的集合&#xff1b;用专业的术语讲&#xff0c;他就是一个程序的执行单元&#xff1b;事务本身其实并不包含这4个特性&#xff0c;只是我们需要通过某些手段&#xff0c;尽可能的让这个执行单元满足这四个特…

【C语言进阶笔记】

文章目录 1. const&#xff08;常量指针、指针常量&#xff09;2. static3. extern4. 指针数组和数组指针5. 结构体对齐6. int / uint取值范围、二进制形式与转换、负数表示7. \0&#xff0c;0&#xff0c;"0"&#xff0c;0之间的区别8. 类型自动转换9. 内存结构10. …

【前端之旅】nvm-Node版本管理工具

一名软件工程专业学生的前端之旅,记录自己对三件套(HTML、CSS、JavaScript)、Jquery、Ajax、Axios、Bootstrap、Node.js、Vue、小程序开发(Uniapp)以及各种UI组件库、前端框架的学习。 【前端之旅】Web基础与开发工具 【前端之旅】手把手教你安装VS Code并附上超实用插件…