15-Vue技术栈之创建Vue3.0工程

news2024/12/22 14:16:35

目录

  • 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/582374.html

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

相关文章

DAY 70 WEB缓存——squid代理服务器应用

正向代理&#xff1a;代替客户端向服务端发送请求。 反向代理&#xff1a;代理服务端&#xff0c;将请求转发给多个服务端。 Squid代理服务器介绍 Squid 主要提供缓存加速、应用层过滤控制的功能。 代理的工作机制&#xff08;缓存网页对象&#xff0c;减少重复请求&#x…

深度学习常用名词解析

深度学习&#xff1a; 英文DL(Deep Learning),指多层的人工神经网络和训练它的方法。一层大量的神经网络会把大量的矩阵数字作为输入&#xff0c;通过非线性激活方法获取权重&#xff0c;再产生另一个数据集和作为输出。 Epoch&#xff1a; 在模型训练的时候含义是训练集中的…

数据结构——实现双向链表

文章目录 :cool:前言:smile:带头双向循环链表的结构体搭建和初始化的操作:bear:创造一个哨兵位头结点:monkey:申请一个节点:dog:初始化:cat:打印:potato:判空:tomato:销毁:cow:尾插:strawberry:头插:banana:尾删:orange:头删:pear:查找:watermelon:在pos位置之前插入:apple:删除…

electron-vue 运行报错 Object.fromEntries is not a function

文章目录 1. 背景2. 解决方案2.1 第一步&#xff1a;安装依赖2.2 第二步&#xff1a;项目中引入 3. 组件详解 1. 背景 最近研究一款桌面端应用的开发框架electron-vue&#xff0c;在按照 electron-vue官方文档 操作之后操作如下&#xff0c;Object.fromEntries is not a funct…

抖音seo源码搭建,抖音矩阵系统源码分发,抖音矩阵同步分发

前言&#xff1a;抖音seo源码&#xff0c;抖音矩阵系统源码搭建&#xff0c;抖音矩阵同步分发。抖音seo源码部署是需要对接到这些正规接口再来做开发的&#xff0c;目前账号矩阵程序开发的功能&#xff0c;围绕一键管理多个账号&#xff0c;做到定时投放&#xff0c;关键词自动…

腾讯云服务器端口怎么全开?教程来了

腾讯云服务器端口怎么全开&#xff1f;云服务器CVM在安全组中设置开通&#xff0c;轻量应用服务器在防火墙中设置&#xff0c;腾讯云百科来详细说下腾讯云服务器端口全开放教程&#xff1a; 目录 腾讯云服务器端口全部开通教程 云服务器CVM端口全开放教程 轻量应用服务器开…

一文学会TypeScript

TypeScript笔记 文章目录 TypeScript笔记[toc]第一章 TypeScript简介1.1、TypeScript简介1.2、TypeScript安装1.3、TypeScript项目初始化1.4、Hello TypeScript 第二章 TypeScript数据类型2.1、TypeScript的类型2.2、字面量类型2.3、联合类型2.4、any 与 unknown2.5、类型断言2…

5.1 因特网概述

5.1 因特网概述 我们知道因特网是一个很大的互联网&#xff0c;它由大量的通过路由器互联起来的物理网络构成&#xff0c;我们下思考几个问题 为什么因特网要考虑包容多种物理网络技术呢&#xff1f; 因为价格低廉的局域网只能够提供短距离的高速通信&#xff0c;而能够跨越长…

渲大师云主机按量付费功能上线!

云主机可以提供强大的计算和存储能力&#xff0c;通过使用云主机&#xff0c;政企办公、视觉设计、影视制作和深度学习领域的专业人士可以获得更大的灵活性、可扩展性和计算能力&#xff0c;提高工作效率和效果。 然而&#xff0c;当我们在选择和使用云主机时&#xff0c;需要…

如何优雅的在SpringBoot中编写选择分支,而不是大量if else?

一、需求背景二、创建项目三、基础工作四、定义 Handler 类五、实现员工接口六、功能测试6.1 开发控制器6.2 功能测试 七、总结 一、需求背景 部门通常指的是在一个组织或企业中组成的若干人员&#xff0c;他们共同从事某一特定工作&#xff0c;完成共同的任务和目标。在组织或…

Logisim 头歌 偶校验解码电路设计 图解及代码(计算机组成原理)

努力是为了不平庸~ 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。 急的同学请直接点击目录跳到下方解答处&#xff01;&#xff01; 目录 图解&#xff1a;​编辑 代码题解&#xff08;免费&#xff09;&#x…

泰酷辣!基于全志R818的开源超迷你安卓手持终端CyberPad,芒果派惊喜之作

​继推出大小仅与普通SD卡不相上下爱的超迷你模组MCore-H616核心板之后&#xff0c;鸽了近半年时间的芒果派&#xff0c;又带来了一款惊喜之作——MCore-R818核心板。 该款MCore的设计也是基于R818的特性&#xff0c;做出了一些小小的改变。 芯片本体封装设计较小&#xff0c;…

【力扣周赛】第347场周赛

【力扣周赛】第347场周赛 6457. 移除字符串中的尾随零题目描述解题思路 2711. 对角线上不同值的数量差题目描述解题思路 6455. 使所有字符相等的最小成本题目描述解题思路 6456. 矩阵中严格递增的单元格数题目描述解题思路 6457. 移除字符串中的尾随零 题目描述 描述&#xf…

如何让Task在非线程池线程中执行?

Task承载的操作需要被调度才能被执行&#xff0c;由于.NET默认采用基于线程池的调度器&#xff0c;所以Task默认在线程池线程中执行。但是有的操作并不适合使用线程池&#xff0c;比如我们在一个ASP.NET Core应用中承载了一些需要长时间执行的后台操作&#xff0c;由于线程池被…

Linux:shell脚本的介绍,创建与执行

linux的shell脚本就是windows的bat脚本&#xff0c;也就是通常所说的批处理。更简洁地说&#xff0c;就是很多命令的结合体&#xff0c;就像编程一样。 windows脚本的扩展名是.bat&#xff0c;而linux脚本的扩展名则是.sh centos在编写shell脚本的文件最上边&#xff0c;需要加…

如何使用Sentinel的Slot插槽实现限流熔断,看完这篇文章会有新的收获

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇文章将详细介绍如何使用Sentinel的Slot插槽实现限流熔断&#xff0c;后续文章将详细介绍Sentinel的其他知识。 如果文章有什么需要改进的地方还请大佬不吝赐教&#x…

对于2023年参加国家计算机软考系统分析师的感想

文章目录 前言系分简介系分知识点今年的题型综合知识(上午选择题)案例分析&#xff08;下午简答分析题&#xff09;论文&#xff08;下午小作文&#xff09; 写在最后 前言 23年3月27日参加了国家计算机软考系统分析师&#xff0c;考完后很多的题库网站就有小道估分了。当然&a…

一些零零碎碎的记录

Questions1. 用户访问多网址服务器同一个IP是怎么回事 Q:用户访问服务器的同一个IP不同网址&#xff0c;服务器是如何区分的A: 在 HTTP 协议中&#xff0c;客户端通过发送请求报文来向服务器请求资源。每个 HTTP 请求都包含一个 HTTP 头部&#xff0c;其中包括了一些关键信息&…

力扣sql中等篇练习(三十)

力扣sql中等篇练习(三十) 1 即时食物配送||| 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 1.2 示例sql语句 # Write your MySQL query statement below SELECT order_date,ROUND(100*count(IF(order_datecustomer_pref_delivery_date,customer_id,null))/count(*)…

studio one6免费版下载及配置要求 附精调效果包

提到编曲软件&#xff0c;就不得不说这款水果编曲软件。它对新手和老手都比较友好&#xff0c;是一款较为经典的编曲软件。 这款软件提供了强大而全面的音符、音效编辑器&#xff0c;可以在其中插入各种乐器声音&#xff0c;如果内置乐器无法满足编曲需求&#xff0c;还可以外…