Vue3中Vite和Vue-cli的特点与区别详解

目录
  • 1. 创建3.0项目
  • Vite 与 Vue-cli 是什么？
    • Vue-cli 的特点：
    • Vite 的特点：
  • Vite 和 Vue-cli的区别：
  • 总结：

1. 创建3.0项目

vue-cli : 安装并执行 npm init vue@latest

选择项目功能时： 除了第一项的项目名字外，其他可以暂时No

cd title
npm install
npm run dev ：运行
npm run build: 打包 (生成一个dist文件夹)

vite: 使用vite 体验更快速

npm init vite-app title
cd title
npm install
npm run dev

title 代表创建 Vue3 项目的文件夹名称

Vite 与 Vue-cli 是什么？

Vue-cli 的特点：

是Vue2.0最棒的前端构建工具，是WebPack的超集

Vue-cli 基于WebPack构建，配置好了打包规则

内置了热模块重载的开发服务器

有丰富的官方插件合集，站在webpack庞大的社区资源上

友好的图形化创建和管理Vue项目界面 : vue ui

vue-cli在(前端)服务启动之前，要把所有代码打包成Bundle再启动服务，这也是为什么一个些大型项目 启动时，特别慢的原因。这一点在Vite做了大幅度改善。

Vite 的特点：

Vite是Vue团队开发的新一代前端开发与构建工具，vite不是基于webpack,

它为了解决项目启动慢的问题，vite通过一开始将应用中的模块分为依赖和源码两类，改进了开发服务器的启动慢的特点；

依赖： 大多为在开发时，不会变动的纯js，一些较大的依赖(例如有上百个模块的组件库：element-ui) ,处理的代价很高。依赖通常会存在多种模块化的格式.vite会使用esbuild预构建依赖，esbuld使用Go编写，并且比 js编写的打包器，速度快10-100倍；

源码： 通常包含一些并非直接是js的文件，需要转换，时常被编译。同时，并不是所有的源码都需要同时被加载。(例如：基于路由拆分的代码模块)。

以上： 这就是为什么vite启动快的原因；

Vite 和 Vue-cli的区别：

  1. vite是基于原生Es6 Modules，在生产环境下打包使用的Rollup；
  2. vue-cli基于webpack封装，生产环境和开发环境都是基于webpack打包；
  3. 所以两者在生产环境都是基于源代码的文件打包。
  4. 在开发环境中，Vite是基于原生的es6，无需对代码进行打包，浏览器可以直接调用，所以说vite因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验极好；
  5. vite会取代vue-cli吗？ 尤雨溪(Evan You)在Twitter上说：
    ​ 起初我不确定，但在这个阶段，我相信最终会是这样。

总结：

以上就是 vue3 中Vite 和 Vue-cli的特点和区别。

到此这篇关于Vue3中Vite和Vue-cli的特点与区别的文章就介绍到这了,更多相关Vue3 Vite和Vue-cli区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3+Vite项目按需自动导入配置以及一些常见问题修复

    目录 一.Vue API自动导入 1.1 配置unplugin-auto-import 1.2 可能遇到ts,eslint不识别而导入报错的问题 1.3 配置src/component目录下的组件自动引入 二.按需引入UI组件库(antd,element-plus) 2.1.按需引入element-plus 2.2 ant-design-vue 按需引入 2.3 自动导入 Element Plus Icon 三.关于配置文件 总结 一.Vue API自动导入 解决的问题:避免在每个vue组件中都

  • vue3使用Vite打包组件库从0搭建过程详解

    目录 手动搭建一个用于测试组件库组件 Vue3 项目 初始化 ts 搭建一个基于 vite 的 vue3 项目 安装插件 配置 vite.config.ts 新建入口 html 文件 app.vue 入口 main.ts 配置脚本启动项目 手动搭建一个用于测试组件库组件 Vue3 项目 本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目 因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript.vue3,同时

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • Vue3从0搭建Vite打包组件库使用详解

    目录 打包配置 声明文件 打包配置 本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/plugin-vue -D -w 在 components 文件下新建vite.config.ts配置文件 import { defineConfig } from "vit

  • 使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程

    目录 Vite前端开发与构建工具 Vue3 与 Vue2区别 TypeScript 使用Vite创建脚手架 1.创建项目文件夹 2.选择Vue 3.选择TypeScript 4.完成后可以看到项目文件夹(my-vue-app) 配置文件引用别名 alias 修改 vite.config.ts 文件配置(此时:会报错 path 未定义,接下来定义path) 定义path,修改tsconfig.json 安装css处理器插件scss 配置全局scss样式(在src/assets 下创建style 文

  • vue $router和$route的区别详解

    vue $router和$route的区别详解

    一.router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象...经常用的跳转链接就可以用this.$router.push,和router-link跳转一样... this.$router.push会往history栈中添加一个新的记录..详细见vue官方文档 route相当于当前正在跳转的路由对象..可以从里面获取name,path,params,query等.. 打印this.$route和this.$router. 路由传参的方

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • 对pandas中两种数据类型Series和DataFrame的区别详解

    1. Series相当于数组numpy.array类似 s1=pd.Series([1,2,4,6,7,2]) s2=pd.Series([4,3,1,57,8],index=['a','b','c','d','e']) print s2 obj1=s2.values # print obj1 obj2=s2.index # print obj2 # print s2[s2>4] # print s2['b'] 1.Series 它是有索引,如果我们未指定索引,则是以数字自动生成. 下面是一些例

  • 对python中 math模块下 atan 和 atan2的区别详解

    atan 和 atan2 都是反正切函数,返回的都是弧度 对于两点形成的直线,两点分别是 point(x1,y1) 和 point(x2,y2),其斜率对应角度的计算方法可以是: angle = atan( (y2-y1)/(x2-x1) ) 或 angle = atan2( y2-y1, x2-x1 ) 因此可以看出 atan 和 atan2 的区别: 1.参数的个数不同:atan 为单个参数,atan2为两个参数 2.atan2 的优点在于: 如果 x2-x1等于0 ,角度依然可以计算,但是

  • 对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解

    在用tensorflow做一维的卷积神经网络的时候会遇到tf.nn.conv1d和layers.conv1d这两个函数,但是这两个函数有什么区别呢,通过计算得到一些规律. 1.关于tf.nn.conv1d的解释,以下是Tensor Flow中关于tf.nn.conv1d的API注解: Computes a 1-D convolution given 3-D input and filter tensors. Given an input tensor of shape [batch, in_wi

  • python中urllib.request和requests的使用及区别详解

    urllib.request 我们都知道,urlopen()方法能发起最基本对的请求发起,但仅仅这些在我们的实际应用中一般都是不够的,可能我们需要加入headers之类的参数,那需要用功能更为强大的Request类来构建了 在不需要任何其他参数配置的时候,可直接通过urlopen()方法来发起一个简单的web请求 发起一个简单的请求 import urllib.request url='https://www.douban.com' webPage=urllib.request.urlopen(

  • Python中的None与 NULL(即空字符)的区别详解

    1.首先要了解Python的对象的概念: Python中,万物皆对象,所有的操作都是针对对象的,那什么是对象,5是一个int对象,'oblong'是一个str对象,异常也是一个对象,抽象一点是,人,猫,够也是一个对象 那对于一个对象,它就有包括两方面的特征:  属性:去描述它的特征  方法: 它所具有的行为 所以,对象=属性+方法 (其实方法也是一种属性,一种区别于数据属性的可调用属性 把具有相同属性和方法的对象就可以归为一类,即Classl.类就好比是一张蓝图,使用一个类可以创建多个对象实例

  • C#中托管DLL和非托管DLL的区别详解

    首先解释一下,托管DLL和非托管DLL的区别.狭义解释讲,托管DLL就在Dotnet环境生成的DLL文件.非托管DLL不是在Dotnet环境生成的DLL文件. 托管DLL文件,可以在Dotnet环境通过 "添加引用" 的方式,直接把托管DLL文件添加到项目中.然后通过 Using DLL命 名空间,来调用相应的DLL对象 .  非托管DLL文件,在Dotnet环境应用时,通过 DllImport 调用. C# 调用非托管DLL文件.DLL文件是用C语言编写的. 托管DLL就是能够在公共

  • nginx配置proxy_pass中url末尾带/与不带/的区别详解

    nginx配置proxy_pass时url末尾带"/"与不带"/"的区别如下: 注意:当location为正则表达式匹配模式时,proxy_pass中的url末尾是不允许有"/"的,因此正则表达式匹配模式不在讨论范围内.  proxy_pass配置中url末尾带/时,nginx转发时,会将原uri去除location匹配表达式后的内容拼接在proxy_pass中url之后. 测试地址:http://192.168.171.129/test/tes

随机推荐