Vite与Vue-cli的区别和特点

目录

  • 前言
  • 1.如何使用Vite和Vue-cli创建vue3.0项目
  • 2.Vite与Vue-cli的特点
  • 3.Vite与Vue-cli之间的区别
  • 总结

前言

Vite是创建vue3.0时的一个基本项目脚手架和开发服务器的构建工具,他和vue-cli类似,本期就给大家讲解一下两个脚手架之间的区别和特点。


1.如何使用Vite和Vue-cli创建vue3.0项目

  • Vue-cli创建vue3.0项目
    1. vue-cli : 安装并执行 npm init vue@latest
    2. 选择项目功能时: 除了第一项的项目名字外,其他可以暂时No
    3. cd < your-project-name >(进入你所创建的项目中)
    4. npm install (下载依赖)
    5. npm run dev :(运行项目)
    6. npm run build: 打包 (生成一个dist文件夹)
  • Vite创建Vue3.0项目
    1. npm init vite-app < 项目名称 >
    2. cd < your-project-name > (进入你所创建的项目中)
    3. npm install (下载依赖)
    4. npm run dev :(运行项目)

由此可见Vite要比vue-cli更加方便快捷


2.Vite与Vue-cli的特点

  • vue-cli的特点:
    1. 是Vue2.0最棒的前端构建工具,是WebPack的超集 Vue-cli 基于WebPack构建,配置好了打包规则
    2. 内置了热模块重载的开发服务器
    3. 有丰富的官方插件合集,站在webpack庞大的社区资源上
    4. 友好的图形化创建和管理Vue项目界面 : vue ui
    5. vue-cli在(前端)服务启动之前,要把所有代码打包成Bundle再启动服务,这也是为什么一个些大型项目 启动时,特别慢的原因。这一点在Vite做了大幅度改善
  • Vite的特点:
    1. Vite是Vue团队开发的新一代前端开发与构建工具,vite不是基于webpack, 它为了解决项目启动慢的问题,vite通过一开始将应用中的模块分为依赖和源码两类,改进了开发服务器的启动慢的特点;

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

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

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


3.Vite与Vue-cli之间的区别

  1. vite是基于原生Es6 Modules,在生产环境下打包使用的Rollup;
  2. vue-cli基于webpack封装,生产环境和开发环境都是基于webpack打包;
  3. 所以两者在生产环境都是基于源代码的文件打包。
  4. 在开发环境中,Vite是基于原生的es6,无需对代码进行打包,浏览器可以直接调用,所以说vite因为基于浏览器的原生功能,省掉了打包过程,在开发环境中体验极好;

总结

以上就是在Vite与Vue-cli的区别和特点以及如何使用这两种脚手架搭建Vue3.0的项目。希望本篇文章能够帮助到你,不懂得可以评论区或者私信问我,我也会一 一解答。谢谢观看!
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog

你可能感兴趣的:(vue3.0,vue.js,webpack,javascript)