Vite快速上手

认识 Vite

Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。

由两部分组成

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

安装

Vite 需要 Node.js 版本 >= 12.0.0

$ npm install vite

启动项目 npx vite

功能

热模块加载

Vite 提供了一套原生 ESM 的 HMR API，框架利用 API 可以 提供及时、准确更新、无需加载页面或清楚文件状态，

注意哈：这些都是内置在 Vite中，无需配置

对 Css 的支持

Vite可以直接处理 .css 文件 也拥有 HMR

对 css 预处理器

不需要安装特定的插件，但是需要安装相关依赖

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

使用单组件文件需要 <style lang="less"> 会自动开启

Postcss

vite 直接支持 postcss，直接安装postcss并配置 postcss.config.js 文件即可

// 安装 postcss
npm install postcss-preset-env -d

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

st

对于.ts也是原生就支持

vue

需要依赖的插件有三个可分别选择

• Vue 3 单文件组件支持： @vitejs/plugin-vue
• Vue 3 JSX 支持： @vitejs/plugin-vue-jsx
• Vue 2 支持： underfin/vite-plugin-vue2

安装完之后 对vite.config.js进行配置

import vue from "@vitejs/plugin-vue";

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

vite 运行打包

通过以下命令进行

npx vite # 本地启动服务
# or
npx vite build  # 项目打包
# or
npx vite preview  # 本地预览打包内容

可通过配置 pakcage.json进行指令更改

"scripts": {
  "serve": "vite",  // 本地启动
  "build": "vite build",  // 项目打包
  "preview": "vite preview" // 打包预览
}

view 配置 vue/cli 使用

可通过以下命令

npm init @vite/latest
# or
yarn create vite

稍后如果你没有安装对应的依赖，会提示让你安装对应的依赖，下一步后会要求你选择需要使用的 框架 cli 会有选项供您选择