百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

ztj100 2025-05-03 17:57 34 浏览 0 评论

webpack、vite、vue-cli、create-vue 这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。

先看这个表格:




脚手架

vue-cli

create-vue

构建项目


vite

打包代码

webpack

rollup

  • 脚手架:创建项目,选择性安装需要的插件,指定统一的风格,生成demo。
  • 构建项目:建立项目的运行环境,需要手动安装插件。
  • 打包代码:代码写好之后,为了更好地使用,需要打包处理一下。

是不是有了一个整体的感觉?我们再来详细地看一下。

vue-cli

官网:https://cli.vuejs.org/zh/index.html

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli

vue-cli 是 Vue 早期推出的一款脚手架,使用 webpack 创建 Vue 项目,可以选择安装需要的各种插件,比如 Vuex、VueRouter等。

vue-cli 用于创建 vue2 的项目;
@vue/cli 用于创建 vue3 的项目,当然也支持 vue2。

使用起来还是比较繁琐的,首先要安装脚手架,然后使用 vue create hello-world 创建项目,具体的就不介绍了。

create-vue

官网:https://staging-cn.vuejs.org/guide/quick-start.html#with-build-tools

create-vue 是 Vue3 专用脚手架,使用 vite 创建 Vue3 的项目,也可以选择安装需要的各种插件,使用更简单。

使用方式

Bash
npm init vue@latest
or
yarn create vue

可选插件

然后我们可以选择需要的各种插件:

  • TypeScript
  • JSX Support
  • Vue Router for Single Page Application development
  • Pinia for state management
  • Vitest for Unit testing
  • Cypress for both Unit and End-to-End testing
  • ESLint for code quality
  • Prettier for code formating

官方最新文档已经看不到 vue-cli 的身影了,只有 create-vue 的使用方式,所以大家可以放心食用。

vite

官网:https://cn.vitejs.dev/

Vite(法语意为 "快速的",发音 /vit/ ,发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,速度快到惊人的 模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

使用 vite 不仅可以创建 vue 的项目,而且可以创建 react 等项目,只是需要手动安装第三方插件,有点麻烦。

目前支持的模板预设如下:

JavaScript

TypeScript

vanilla

vanilla-ts

vue

vue-ts

react

react-ts

preact

preact-ts

lit

lit-ts

svelte

svelte-ts

rollup

官网:https://rollupjs.org/guide/en/

rollup 是一种打包工具,特点就是,打得包非常精简,体积小。
官网是英文的,中文资料也比较少,不过好在常规用法可以参考 vite的官网。

webpack

尤雨溪在知乎的一次回答(https://www.zhihu.com/question/477139054/answer/2156019180)里提到:

webpack core 是一个纯打包工具(对标 Rollup),而 Vite 其实是一个更上层的工具链方案,对标的是 (webpack + 针对 web 的常用配置 + webpack-dev-server)。

webpack core 因为只针对打包不预设场景,所以设计得极其灵活,不局限于针对 web 打包,几乎所有可配置的环节都做成了可配置的。这种极度的灵活性对于一些特定的场景依然不可替代。
但反过来导致的缺点就是配置项极度复杂,插件机制和内部逻辑晦涩难懂,针对常见的 web 也需要大量的配置。

另外大量 loader 插件虽然单独发布却存在各种隐式耦合,很容易配置不当互相影响。对于新手来说,把 webpack 从零开始配到跟 Vite 开箱即用功能对等的程度根本是不可能的任务,所以大部分团队/公司要么用的是基于 webpack 包一层的脚手架(umi, vue-cli),或是专门养一个人称 webpack 配置工程师的角色。

小结

webpack 是一个全能选手,啥都能干,只是有点复杂,对新手不太友好。
Rollup 是后起之秀,打包更简洁。
vite 把 rollup 变成了“开袋即食”,便于新手入门。
create-vue 基本取代了 vue-cli,除非你想创建 vue2 的项目。

所以,想创建一个 vue3 的项目,首选 create-vue,非常方便快捷,建立的项目也可以统一风格。

相关推荐

爬取电影视频数据(电影资源爬虫)

本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。作者:yangrq1018原文链接:https://segmentfault.com/a/11900...

Python效率倍增的10个实用代码片段

引言Python是一门功能强大且灵活的编程语言,广泛应用于数据分析、Web开发、人工智能等多个领域。它的简洁语法和高可读性让开发者能够快速上手,但在实际工作中,我们常常会遇到一些重复性或繁琐的任务。这...

Python数据处理:深入理解序列化与反序列化

在现代编程实践中,数据的序列化与反序列化是数据持久化、网络通信等领域不可或缺的技术。本文将深入探讨Python中数据序列化与反序列化的概念、实现方式以及数据验证的重要性,并提供丰富的代码示例。...

亿纬锂能:拟向PKL买地,在马来西亚建立锂电池制造厂

亿纬锂能5月12日公告,亿纬马来西亚与PEMAJUKELANGLAMASDN.BHD.(PKL)签订《MEMORANDUMOFUNDERSTANDING》(谅解备忘录),亿纬马来西亚拟向PKL购买标的...

一个超强的机器学习库(spark机器学习库)

简介PyCaret...

30天学会Python编程:9. Python文件与IO操作

9.1文件操作基础9.1.1文件操作流程9.1.2文件打开模式表9-1Python文件打开模式...

Python的Pickle序列化与反序列化(python反序列化json)

动动小手,点击关注...

python进阶突破内置模块——数据序列化与格式

数据序列化是将数据结构或对象转换为可存储/传输格式的过程,反序列化则是逆向操作。Python提供了多种工具来处理不同场景下的序列化需求。一、核心内置模块...

微信聊天记录可视化工具详细介绍(微信聊天记录分析报告小程序)

功能概要能做什么...

Python常用文件操作库使用详解(python中文件操作的相关函数有哪些)

Python生态系统提供了丰富的文件操作库,可以处理各种复杂的文件操作需求。本教程将介绍Python中最常用的文件操作库及其实际应用。一、标准库核心模块1.1os模块-操作系统接口主要功能...

Vue3+Django4全新技术实战全栈项目(已完结)

获课》aixuetang.xyz/5739/Django与推荐算法的集成及模型部署实践...

性能调优方面,经常要优化跑的最慢的代码,教你一种快速的方法

在我们遇到性能问题的时候,很多时候需要去查看性能的瓶颈在哪里,本篇文章就是提供了多种常用的方案来监控函数的运行时间。1.time首先说明,time模块很多是系统相关的,在不同的OS中可能会有一些精度差...

Python解决读取excel数据慢的问题

前言:在做自动化测试的时候,我思考了一个问题,就是如果我们的测试用例随着项目的推进越来越多时,我们做自动化回归的时间也就越来越长,其中影响自动化测试速度的一个原因就是测试用例的读取问题。用例越多,所消...

【Python机器学习系列】基于Flask来构建API调用机器学习模型服务

这是我的第364篇...

不会用mmdet工具?速看MMDetection工具的终极指南

来源:计算机视觉工坊添加微信:dddvisiona,备注:目标检测,拉你入群。文末附行业细分群...

取消回复欢迎 发表评论: