一、Vue.js、Vue-CLI、Vite的区别

vuejs、vuecli和vite的主要区别如下:

  • vuejs是Vue.js的核心库,提供了主要的核心功能如数据绑定、组件化等。它是其他工具的基础。
  • vue-cli是Vue项目脚手架工具,可以快速搭建Vue项目脚手架。它会帮我们安装和配置webpack、babel等工具,构建开发环境和生产环境,方便开发Vue项目。
  • vite是一个快速的前端开发构建工具。它采用ES 模块导入和动态导入来替代巨大的 bundle 文件,大大加快开发体验。相比 webpack,vite 的构建速度要快很多。

区别点总结:

  • vuejs是核心库,提供基础功能
  • vue-cli是可构建整个Vue项目的脚手架工具
  • vite是用于快速搭建前端开发环境的构建工具,比vue-cli更轻量级,构建速度更快

所以:

  • vuejs是核心库基础
  • vue-cli可以通过脚手架快速开始一个完整的Vue项目
  • vite是用于快速开发的前端构建工具,性能比vue-cli更好

他们协同使用:

  • 开发前使用vite或vue-cli搭建项目环境
  • 项目中使用vuejs开发组件和功能

二、Vite和vue-cli区别

不同点

（1）作用不同

  • vue-cli是一款Vue项目脚手架生成工具,用于通过命令行快速初始化一个具有基础配置的Vue项目。
  • vite是一款前端开发和构建工具,用于替代webpack进行快速开发。

（2）构建原理不同

  • vue-cli内部使用webpack作为项目构建工具。
  • vite使用原生ES模块化和Rollup.js来进行更快的开发构建。

（3）构建速度

  • vue-cli使用webpack构建速度较慢,项目初始化和打包时间较长。
  • vite采用静态资源导入并做了优化,构建速度比vue-cli快很多,候补提升用户体验。

（4）项目配置

  • vue-cli项目初始化后需要配置webpack、babel等重要插件。
  • vite内置很多优化,新项目基本无需额外配置就可以直接使用。

总结：

  • vue-cli是项目初始化脚手架工具,通过它可以快速建立一个完整的Vue项目;
  • vite主要进行项目构建,以其自身的 schneller 构建模式实现更快地开发体验;
  • 两者功能上都可以用于Vue项目开发,但vite更侧重于快速开发过程。

相同点

vite和vue-cli都是为开发和构建Vue项目而设计的:

  • vue-cli是Vue官方推荐的项目脚手架工具,它可以快速生成一个符合标准的Vue项目模板,里面内置了webpack等构建 tools。
  • vite的定位是一款前端开发构建工具,它专注于提供一个开发体验更流畅的构建系统。

所以两者的差异在于:

  • vue-cli主要用于新建Vue项目时的初始化配置，它给我们生成一个完整的项目模板。
  • vite不是项目脚手架，它只负责开发和构建过程中的模块打包、文件 watching 等工作流。

但具体使用时:

  • 我们可以使用vite来代替vue-cli新建项目,它也提供了命令行工具可以快速初始化项目。
  • 已有的vue-cli项目，也可以选择使用vite来提升项目的构建和开发体验。

总之，两者都是为Vue应用服务的工具:

  • vue-cli方便初始化项目模板
  • vite专注于更快更流畅的开发构建体验

三、如何从 Vue CLI 迁移到 Vite

https://www.youtube.com/watch?v=PAT7SbdTBjI&ab_channel=VueGermany

从已有的Vue CLI项目迁移到Vite的主要步骤是:

（1）删除Vue CLI相关依赖

删除项目中安装的@vue/cli-service和@vue/cli-plugin-xxx等依赖。

（2）安装Vite依赖

1
npm install vite --save-dev

（3）修改package.json

  • 删除scripts中与Vue CLI相关脚本
  • 添加vite脚本:
1
2
3
4
5
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

（4）修改main.js

1
2
3
4
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

（5）移除配置文件

如vue.config.js,因为Vite使用不同的配置方法。

（6）处理静态资源

Vite默认不处理静态资源,需要自行配置或使用vite-plugin-static等插件。

（7）Polyfills处理

Vite使用的是ESModule,需要在入口文件手动引入必要的Polyfills。

（8）重新启动开发

1
npm run dev

以上步骤可以实现从Vue CLI项目迁移到Vite的基本需求。需要时间调整配置细节和适配Vite模式。