m

mun

V1

2022/07/01阅读:32主题:默认主题

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 会有选项供您选择

分类:

前端

标签:

工具介绍

作者介绍

m
mun
V1