Vite的基本使用

认识Vite

• 什么是Vite？官方的定位：下一代前端开发与构建工具
• Vite是一种新型前端构建工具，能够显著提升前端开发体验。

Vite的构造

它由两部分组成：

• 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快。
• 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源。

Vite的安装和使用

• Vite要求Node版本大于12的
• npm install vite -D
• 通过vite来启动项目： npx vite

Vite可以直接支持css的处理：

直接导入css即可

如果要编译less文件：

• 直接导入less文件

• 安装less编译器：npm install less -D

Vite支持postcss的转换：

• 只需要安装postcss，并配置postcss.config.js即可：
• npm install postcss postcss-preset-env -D

module.exports = {
    plugins: [
        require("postcss-preset-env")
    ]
}

vite对TypeScript的支持

• Vite对Typescript是原生支持的，它会直接使用ESBuild来完成编译：
  • 只需直接导入即可
• 如果我们查看浏览器的请求，会发现请求的依然是ts的代码
  • 这是因为Vite中的服务器connect会对我们的请求进行转发
  • 获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析

Vite对Vue的支持

• vite对Vue提供第一优先级支持：
  • Vue3 单文件组件支持：@vitejs/plugin-vue
  • Vue3 JSX支持：@vitejs/plugin-vue-jsx
  • Vue2支持：underfin/vite-plugin-vue2
• 安装支持vue插件：
  • npm install @vitejs/plugin-vue -D
  • 还需要安装一个插件：npm install @vue/compiler-sfc -D
• 在vite.config.js中配置

const vue = require("@vitejs/plugin-vue")

module.exports = {
  plugins: [
    vue()
  ]
}

vite打包项目

• 可以直接通过vite build来完成对当前项目的打包工具
  • npm vite build

• 可以直接通过preview的方式，开启一个本地服务来预览打包后的效果

  • npx vite preview

• 可以设置pakeage.json中的script：

Vite脚手架工具

• Vite实际上是有两个工具的：
  • vite：相当于是一个构件工具，类似于webpack、rollup；
  • @vitejs/create-app：类似vue-cli、create-react-app；
• 安装并使用：
  • npm install @vitejs/create-app -g
  • create-app 项目名称
• 创建完成后和vue-cli创建的基本差不多