vite创建打包预览Vue3流程

news2024/11/26 6:11:56

        本文章只是走了一下创建====》运行===》打包===》预览打包效果的流程步骤,不包含创建后配置vue3项目和打包优化等。

1.使用vite创建vue3项目

创建项目命令:

npm init vite@latest

写完项目名称后回车 

 键盘上下键选择Vue构建

 

根据项目需求选择ts还是js

 

 创建完成

 根据提示反向下载依赖

 默认使用npm run dev运行项目

npm run dev

 

效果:

 

 2.使用vite打包

平时我们习惯用npm run build打包,会出错哈,需要在package.json文件中改东西

 package.json文件:

原代码:

更改后的代码:

保存再运行

npm run build

 打包成功

 打包后项目目录多了个dist文件,里面就是打包后的结果了

3.预览打包后的效果

npm run preview

 

 页面一样就是端口号改变了

 4.主要命令

  1. 创建命令:npm init vite@latest
  2. 运行:npm run dev
  3. 打包:npm run build
  4. 预览:npm run preview

文章到此结束,希望对你有所帮助~

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

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

相关文章

在docker中安装nacos,很详细

在docker中安装nacos,很详细 一、安装docker二、拉取nacos镜像1、查看有那些nacos镜像2、获取最新版本镜像3、获取指定版本的镜像4、查看本地镜像5、删除镜像 三、创建挂载目录1、创建nacos配置文件挂载目录2、创建nacos日志文件挂载目录3、创建nacos数据文件挂载目…

大数据分析案例-基于KMeans和DBSCAN算法对汽车行业客户进行聚类分群

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

W6100-EVB-PICO 做UDP Server进行数据回环测试(七)

前言 前面我们用W6100-EVB-PICO 开发板在TCP Client和TCP Server模式下,分别进行数据回环测试,本章我们将用开发板在UDP Server模式下进行数据回环测试。 UDP是什么?什么是UDP Server?能干什么? UDP (User Dataqram P…

安全问题「一锅端」,数据安全风险评估落地实践

数据安全风险评估是《数据安全法》明确的数据安全基础制度之一,也是重要数据处理者应尽的数据安全保护义务。今年5月,《网络安全标准实践指南—网络数据安全风险评估实施指引》发布,作为数据安全领域的一项重磅级指引,明确提出了网…

接口测试及接口抓包常用的测试工具

接口 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关系等。 接口测试的重要性 是节省时间前后端不…

11. Docker Swarm(二)

1、前言 上一篇中我们利用Docker Swarm搭建了基础的集群环境。那么今天我们就来验证以下该集群的可用性。上一篇的示例中,我创建了3个实例副本,并且通过访问http://192.168.74.132:8080得到我们的页面。 2、验证高可用 1)我们可以通过以下命…

arco-cli脚手架创建项目时,踩坑点及解决办法

项目场景: 提示:这里简述项目相关背景: arco-cli安装新建项目时,前期很顺利,参考官网示例,都没问题的! arco创建arco-pro项目示例:https://arco.design/vue/docs/pro/start 如果遇见问题管方…

2023年8月中国数据库排行榜:TiDB 重夺榜眼,PolarDB 再进一位

斗力频催鼓、争都更少筹。 2023年8月的 墨天轮中国数据库流行度排行 在炎炎夏日中火热出炉,本月共有286个数据库参与排名。本月排行榜前十中,头部变动加剧。TiDB 发奋图强重夺榜眼,阿里云PolarDB 排名连续上升,其余数据库稳居原位…

代理模式【Proxy Pattern】

什么是代理模式呢?我很忙,忙的没空理你,那你要找我呢就先找我的代理人吧,那代理人总要知道 被代理人能做哪些事情不能做哪些事情吧,那就是两个人具备同一个接口,代理人虽然不能干活,但是被 代…

数据结构与算法-链表(含经典面试题)

一 面试经典: 1. 如何设计一个LRU缓存淘汰算法?基础 思想:新加的点来了, 首先去链表里面遍历,如果找到了。删掉 然后插入到头部。头部就是最新的吧如果不在原来的链表里:如果有空间就插入头部。LRU有内存限制的&#x…

理解 Go 中的切片:append 操作的深入分析(篇2)

理解 Go 语言中 slice 的性质对于编程非常有益。下面,我将通过代码示例来解释切片在不同函数之间传递并执行 append 操作时的具体表现。 本篇为第 2 篇,当切片的容量 cap 不够时 func main() {// slice1 当前长度为 3,容量大小也为 3slice1 :…

探索Python中的函数和类:构建模块化和面向对象的程序

文章目录 🍀引言🍀函数:模块化编程的基石🍀类:面向对象编程的基石🍀函数和类的结合:构建高效的程序🍀简单的文字冒险游戏 🍀引言 Python作为一种多范式的编程语言&#x…

web图书管理系统Servlet+JSP+javabean+MySQL图书商城图书馆 源代码

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 web图书管理系统ServletJSPjavabeanMySQL 系统有1权限…

用于100GB+、TB级大型数据集构建【2】--计算包Xarray-主要数据类型

引言: Xarray是一个性能出众的张量操作库,通常用于多通道的时间序列信号处理(比如传感器信号)。通常,在处理此类数据时,我认为您经常使用numpy的np.ndarray。但是,由于np.ndarray是一个简单的矩…

[保研/考研机试] KY103 2的幂次方 上海交通大学复试上机题 C++实现

题目链接: KY103 2的幂次方 https://www.nowcoder.com/share/jump/437195121691999575955 描述 Every positive number can be presented by the exponential form.For example, 137 2^7 2^3 2^0。 Lets present a^b by the form a(b).Then 137 is present…

Linux设备树详解

Linux 设备树详解 Linux 操作系统早期是针对个人电脑设备而开发的操作系统,而个人电脑处理器产商较为单一(例如只有 Intel,AMD)同时个人电脑产商均使用 Intel 或 AMD 制造的处理器,业界形成了统一的总线/硬件接口标准…

稀疏感知图像和体数据恢复的系统对象研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

SpringCloud微服务之间如何进行用户信息传递(涉及:Gateway、OpenFeign组件)

目录 1、想达到的效果2、用户信息在微服务之间传递的两种途径3、用RuoYi-Cloud为例进行演示说明(1)网关将用户信息写在请求头中(2)业务微服务之间通过OpenFeign进行调用,并且将用户信息写在OpenFeign准备的请求头中&am…

02:STM32--EXTI外部中断

目录 一:中断 1:简历 2:AFIO 3:EXTI ​编辑 4:NVIC基本结构 5:使用步骤 二:中断的应用 A:对外式红外传感计数器 1:连接图​编辑 2:函数介绍 3:硬件介绍 4:计数代码 B;旋转编码计数器 1:连接图 2:硬件介绍 3:旋转编码器代码: 一:中断 1:简历 中断:在主程…

硬件产品经理:从入门到精通(新书发布)

目录 简介 新书 框架内容 相关课程 简介 在完成多款硬件产品从设计到推向市场的过程后。 笔者于2020年开始在产品领域平台输出硬件相关的内容。 在这个过程中经常会收到很多读者的留言,希望能推荐一些硬件相关的书籍或资料。 其实,笔者刚开始做硬…