Vue3:用vite创建Vue3项目

一、简介

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

  • 轻量快速的热重载(HMR),能实现极速的服务启动。
  • TypeScriptJSXCSS 等支持开箱即用。
  • 真正的按需编译,不再等待整个应用编译完成。
  • webpack构建 与 vite构建对比图如下:
    webpack构建:
    在这里插入图片描述
    vite构建:
    在这里插入图片描述
    对比看来,vite的构建,可以类比懒加载技术,用到哪个模块,在构建哪个模块。

二、案例

## 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

在平时学习中
√ Add ESLint for code quality? Yes
可以选择No
关闭代码质量检查

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

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

相关文章

计算机指令(Directives)和命令(Commands)的区别

Understanding the Difference Between Computer Directives and Commands (理解计算机指令和命令的区别) In the realm(领域) of computer programming, the terms(措辞、术语) ‘directives’ and ‘commands’ are commonly&a…

迪丽热巴留洋千金回国了吗

迪丽热巴,这个名字在近年来的娱乐圈中可谓是如雷贯耳。作为中国当红女演员,她的美貌与才华吸引了无数粉丝的目光。而近日,有关迪丽热巴留洋千金回国的消息引起了广泛的关注与讨论。 一直以来,迪丽热巴的留学经历被视为她人生中的一…

Rollup入门学习:前端开发的构建利器

在前端开发领域,构建工具对于优化项目结构和提升代码效率扮演着至关重要的角色。Rollup作为一款轻量级且功能强大的JavaScript模块打包器,近年来备受开发者青睐。本文将带你走进Rollup的世界,帮助你快速入门并掌握其核心用法。 一、Rollup简介…

Vue-02

开发者工具 安装插件,用于调试 Vue 应用。 https://chrome.zzzmh.cn/index 搜索 Vue ,下载 Vue.js Devtools ,此插件可以帮助更新信息,而不通过控制台更新,更方便调试。 注:安装插件后,记得在插…

SpringCloud-用nacos做服务注册与调用

步骤1:下载和安装Nacos 首先,你需要从Nacos的官方网站上下载并安装Nacos Server。根据你的操作系统选择合适的版本,并按照官方文档中的说明进行安装和配置。 步骤2:创建Spring Boot项目 在你喜欢的IDE中创建一个新的Spring Boot项…

抖音视频评论挖掘工具|视频批量采集软件

抖音视频评论挖掘工具——让你轻松获取大量评论数据 抖音视频评论挖掘工具是一款基于C#开发的高效、便捷的工具,旨在为用户提供全面的数据采集和分析服务。无论你是想了解用户对某个话题或产品的看法,还是想分析评论中的热点和趋势,这款工具都…

Ubuntu下安装Scala

前言 弄了一下终于成功装上了,这里对此进行一下总结 安装虚拟机 VMware虚拟机安装Ubuntu(超详细图文教程)_vmware安装ubuntu-CSDN博客https://blog.csdn.net/qq_43374681/article/details/129248167Download Ubuntu Desktop | Download | …

链接生成二维码(vue-qriously)

一、安装vue-qriously npm i vue-qriously -S二、全局mian.js中引入 import Vue from vue import VueQriously from vue-qriously Vue.use(VueQriously)三、使用 <template><div><qriously :value"qrData" :size"200" /></div>…

求排列的逆序数(c++题解)

题目描述 在Internet上的搜索引擎经常需要对信息进行比较&#xff0c;比如可以通过某个人对一些事物的排名来估计他&#xff08;或她&#xff09;对各种不同信息的兴趣&#xff0c;从而实现个性化的服务。 对于不同的排名结果可以用逆序来评价它们之间的差异。考虑1,2,…,n的…

HTML笔记2

11&#xff0c;路径 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>Document</title> <…

每日一练——二分查找

#include<stdio.h>int main() {char arr[] {1,2,3,4,5,6,7,8,9,10};int k 7;//查找kint left 0;int right sizeof(arr) / sizeof(arr[0]);int mid (left right) / 2 ; //中间元素的下标while(left<right){if&#xff08;arr[mid] < k&#xff09;{left mid …

第9章:Nginx高级应用场景《Nginx实战:从入门到精通》

随着Web技术的持续演进和业务需求的不断升级&#xff0c;Nginx早已超越了简单的Web服务器角色&#xff0c;成为了处理复杂网络请求和流量管理的多面手。在这一章中&#xff0c;我们将深入挖掘Nginx在高级应用场景中的无限潜力&#xff0c;包括构建坚如磐石的高可用性架构、实施…

源代码加密、源代码防泄漏c/c++与git服务器开发环境

源代码加密对于很多研发性单位来说是至关重要的&#xff0c;当然每家企业的业务需求不同所用的开发环境及开发语言也不尽相同&#xff0c;今天主要来讲一下c及git开发环境的源代码防泄密保护方案。 企业源代码泄密场景一、 在很多嵌入式开发企业中使用的c/c开发语言&#xff…

android开发者文档,推荐一个GitHub项目

Android相关 Android部分我就不分几大块了。直接列举&#xff0c;但是列举到的每一项都是面试经常会问到并且会延伸问的&#xff0c;所以需要深入的去研究。 四大组件有哪些&#xff0c;说出你对他们在Android系统中的作用和理解。Activity生命周期&#xff0c;A启动B两个页面…

定制你的Nginx世界:通过Dockerfile轻松修改默认首页,玩转容器化Web服务器

在云原生时代&#xff0c;Docker已成为众多开发者和运维人员手中的一把利器。借助Docker&#xff0c;我们可以快速构建、部署和运行应用程序&#xff0c;而其中的Dockerfile更是扮演着至关重要的角色&#xff0c;它如同一份详细的说明书&#xff0c;指导Docker如何构建自定义镜…

【设计模式】(二)设计模式六大设计原则

一、 设计原则概述 设计模式中主要有六大设计原则&#xff0c;简称为SOLID &#xff0c;是由于各个原则的首字母简称合并的来(两个L算一个,solid 稳定的)&#xff0c;六大设计原则分别如下&#xff1a; ​ 1、单一职责原则&#xff08;Single Responsibitity Principle&#…

除了Gamma和tome,还有哪些值得推荐的ai写ppt工具?

如果要说时下职场中最受欢迎的ai工具&#xff0c;那一定非ai写ppt莫属&#xff0c;即使用各类基于AI人工智能技术的软件&#xff0c;来帮我们直接生成ppt&#xff0c;免去制作PPT的各个中间环节&#xff0c;包括&#xff1a;梳理框架、搜集素材、搜集图片、排版美化等&#xff…

EasyRecovery数据恢复软件2024免费试用版下载

EasyRecovery数据恢复软件有免费试用版。用户可以免费下载并扫描丢失的文件&#xff0c;通过免费的扫描功能查看需要恢复的文件是否可以进行恢复。但是&#xff0c;当需要进行文件恢复操作时&#xff0c;需要付费购买相应的版本才可解锁全部功能。 此外&#xff0c;EasyRecove…

Python处理表格数据库之Agate使用详解

概要 您是否有时觉得在处理表格数据时感到不知所措? 也许你在处理一个大型 CSV 文件,遇到了各种数据不一致的问题,或者需要验证数据,确保其准确无误才能进行下一步分析。 传统的数据分析库或许功能强大,但学习曲线陡峭,用起来有点杀鸡用牛刀的感觉。 这时,有一个更…

MFC资源记录

记录MFC的相关资源&#xff1a; MFC教程视频&#xff0c;网盘提取码&#xff1a;lty2VC中文MSDN手册MFC类库详解CHM格式电子书还可以查看MFC的MSDN《深入浅出MFC》