28.vite

news2024/11/16 3:49:15

目录

1  一些概念

1.1  单页面应用程序SPA

1.2  vite

2  初始化vite项目

3  项目中的文件


1  一些概念

1.1  单页面应用程序SPA

单页面应用程序是只有一个页面的前端,切换页面通过前端路由来切换

特点如下

  1. 实现了前后端分离,后端仅出接口,前端做自己的跳转,没有跳转也会减轻服务器的压力
  2. 在切换页面的时候卡顿问题会减少,但首次加载页面的时间会长一些。解决问题的方式有 路由懒加载,代码压缩,CDN加速,网络传输压缩
  3. 不利于SEO,解决问题的方式有 SSR服务器端渲染

1.2  vite

vite是快速创建工程化SPA的方式,与vue-cli功能与用法类似,与vue-cli的区别如下

2  初始化vite项目

npm init vite-app 项目名称

生成后的文件是这样的

之后我们需要进入 项目目录中,然后输入 npm install 安装依赖包

最后输入 npm run dev 就可以启动项目了

访问 localhost:3000 会看到这样的页面

3  项目中的文件

初始化产生的项目文件与 vue-cli 的类似,感兴趣可以看一下 13.vue-cli_Suyuoa的博客-CSDN博客

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

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

相关文章

Flink TableAPI window and watermarket

序言 本次主要是弄清楚.批流统一 的处理方式,因为它是使用SQL来操作批流计算的.所以它怎么设置算子并行度?如何设置窗口?如何处理流式数据?等等 有很多疑问. 我还是觉得直接使用流计算的API更好.流批一体API最终也是转换成流式计算,最主要的是使用sql来设置算子或者窗口,并…

python合并多个excel,每个excel中有相同的列,按指定列名将数据列合并到一起。以统计学生多个作业提交情况为例。

一、实现目标 有多个excel文件,每个excel文件是一次学生作业的提交情况,最终统计出所有学生所有作业的提交情况。具体格式和内容如下: excel1.xlsx excel2.xlsx excel3.xlsx: 最后统计出所有学生提交的所有作业的情况: 二、实现思路

C# 自动备份文件

目录 文件目录如下 APBackUpFiles app.config OracleHelper LocalFileMethods LogFile packages.config ReadFile 如何发布 在工作的时候,遇到了需要定时对服务器的文件进行备份的需求,原因是 AP(服务器)上的空间不够了&a…

遗传算法解决TSP旅行商问题(numpy、pandas)

努力是为了不平庸~ 学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。 目录 一、引言 原理: 问题: 二、思路步骤 三、代码编写步骤 A、代码各步骤的方法、目的及意义 1. 导入所需的库&…

测试人,你凭什么脱颖而出?

我们在软件测试面试时,可能经常会碰到HR这样问“与其他竞争者相比,你认为自己的优势在哪里?” 看似简单,但仔细深思可能心理陡然冰冰凉,因为自己难以有信心比他人突出(除了腰间盘),看…

DBA 抓包神器 tshark 测评

想窥探神秘的网络世界的奥秘,tshark 助你一臂之力! 作者:赵黎明 爱可生 MySQL DBA 团队成员,熟悉 Oracle、MySQL 等数据库,擅长数据库性能问题诊断、事务与锁问题的分析等,负责处理客户 MySQL 及我司自研 D…

chatgpt赋能python:Python火了原因分析

Python火了原因分析 Python语言是近年来最热门的编程语言之一,有很多原因可以解释它的成功。本文将介绍三个最重要的原因,以及如何利用这些原因来提高您的Python编程技能。 Python具有易学性和流行的库 Python的设计使它非常容易学习,尤其…

【机器学习】十大算法之一 “朴素贝叶斯”

作者主页:爱笑的男孩。的博客_CSDN博客-深度学习,活动,python领域博主爱笑的男孩。擅长深度学习,活动,python,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typeblog个…

Visual Studio Code Arduino资源占用和效率对比

Visual Studio Code&Arduino资源占用和效率对比 系统资源占用:编译效率: 这段时间在玩ESP32,闲来无事对比了一下Visual Studio Code后面简称VS和Arduino的效率和资源占用,只是大致的对比,没有斤斤计较。 配置为&am…

springboot集成swagger

文章目录 swagger概述swagger常用注解ApiImplicitParam swagger的集成方式集成swagger2.9集成swagger2.10集成swagger3 swagger概述 swagger是当下比较流行的实时接口文文档生成工具。接口文档是当前前后端分离项目中必不可少的工具,在前后端开发之前,后…

Mysql数据库初体验

Mysql数据库初体验 一、数据库的基本概念1.数据(Data)2.表3.数据库4.数据库管理系统(DBMS)5.数据库系统 二、数据库系统发展史1.第一代数据库2.第二代数据库3.第三代数据库 三、当今主流数据库介绍四、数据库分类1.关系数据库2.关系型 SQL 数…

前端教程:Canvas怎样创建画布和绘制图形?

HTML5提供了一种全新的画布功能,即通过Canvas来让用户在网页中绘制图形、文字、图片等。Canvas表示画布,现实生活中的画布是用来作画的,HTML5中的Canvas与之类似,我们可以称它为“网页中的画布”。默认情况下,Canvas是…

【MySQL高级篇笔记-锁(下) 】

此笔记为尚硅谷MySQL高级篇部分内容 目录 一、概述 二、MySQL并发事务访问相同记录 1、读-读情况 2、写-写情况 3、读-写或写-读情况 4、并发问题的解决方案 三、锁的不同角度分类 1、从数据操作的类型划分:读锁、写锁 2、从数据操作的粒度划分&#xf…

攻防渗透第四章(谷歌语法)

一、常用谷歌黑客语法 制定网站的URL site: 包含特定字符的URL inurl: 网页标题中包含特定字符 intitle: 正文中指定字符 intext: 指定类型文件 filetype 开发语言判断 site:163.com filetype:php site:163.com filetype:jsp site:163.com filetype:asp site:163.com filetype…

工具篇--4 消息中间件-RabbitMq 模型介绍

1 介绍: RabbitMQ 是一个开源的消息中间件,它实现了 AMQP(高级消息队列协议)标准,并且支持多种语言和操作系统,包括 Java、Python、Ruby、PHP、.NET、MacOS、Windows、Linux 等等。RabbitMQ 提供了可靠的消息传递机制…

实战:单点登录的两种实现方式,你学会了吗?

概念 单点登录(Single Sign-On,SSO)是一种身份验证服务,允许用户使用单个标识来登录多个应用程序或系统。如下图所示,用户只需要用户名/密码登陆一次就可以访问系统A、系统B和系统C。 在传统的登录方式中,…

HTML5 progress和meter控件

在HTML5中,新增了progress和meter控件。progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装、文件的复制等场景的进度。meter控件为计量条控件,表示某种计量,适用于温度、重量、金额等量化的表现。…

【CSS】文字扫光 | 渐变光

码来 可调整角度与颜色值来改变效果 <p class"gf-gx-color">我是帅哥</p> <style>.gf-gx-color {background: -webkit-linear-gradient(135deg,red,red 25%,red 50%,#fff 55%,red 60%,red 80%,red 95%,red);-webkit-text-fill-color: transparen…

中国物流成本高在哪里?怎么降低?

随着中国经济的快速发展&#xff0c;物流行业也得到了快速发展。然而&#xff0c;尽管中国物流行业的规模已经达到了世界领先水平&#xff0c;但中国物流成本也一直是业内关注的一个问题。那么&#xff0c;中国物流成本高在哪里&#xff1f;怎么降低呢&#xff1f;本文将从多个…

Surface渲染流程解析:如何实现车载智能座舱的高质量图像显示?

SurfaceFlinger简介 SurfaceFlinger是Android系统中负责图形渲染和显示的一个系统服务&#xff0c;SurfaceFlinger负责将来自多个应用程序的屏幕缓冲区组合成单个屏幕缓冲区&#xff0c;并将最终结果输出到系统的显示设备上。SurfaceFlinger在Android系统中是一个非常重要的服…