Vite的基本使用

本文介绍了Vite——下一代前端构建工具,包括其基本概念、构成、安装与使用方法。Vite提供快速的HMR,原生支持CSS、TypeScript和Vue。通过简单的配置,Vite能处理less和postcss,同时提供Vue3和Vue2的插件支持。此外,还讲解了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创建的基本差不多
<think>嗯,用户想了解如何在Vue项目中使用Vite。首先,我需要解释Vite基本概念,以及它为什么适合Vue项目。然后,分步骤说明如何创建一个Vite项目,包括安装和运行命令。接着,需要提到项目结构,特别是关键的目录和文件,比如main.js、App.vue等。还要涉及Vite的配置文件vite.config.js,说明如何配置别名和插件。开发和生产环境的命令也要提到,比如dev、build、preview。可能用户对热模块替换和依赖预构建不太清楚,需要简要解释这些概念。最后,根据常见问题,列举几个相关问题,比如与Vue CLI的区别、配置代理、自定义插件、处理静态资源等。确保回答清晰,步骤明确,代码示例正确,并且相关问题覆盖用户可能进一步询问的点。</think><< Vite 是一个现代化的前端构建工具,专为快速开发而设计。在 Vue 项目中可以通过以下方式使用 Vite: 1. 创建Vite项目(推荐Vue3): ```bash npm create vite@latest my-vue-app -- --template vue # 或选择其他模板(vue-ts表示TypeScript) npm create vite@latest my-vue-app -- --template vue-ts ``` 2. 项目结构说明: ```bash my-vue-app/ ├─ node_modules/ ├─ public/ ├─ src/ │ ├─ assets/ │ ├─ components/ │ ├─ App.vue │ └─ main.js ├─ index.html # 入口HTML文件 ├─ vite.config.js # Vite配置文件 └─ package.json ``` 3. 配置文件示例(vite.config.js): ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': '/src' // 路径别名配置 } }, server: { port: 3000, // 开发服务器端口 open: true // 自动打开浏览器 } }) ``` 4. 开发命令: ```bash npm run dev # 启动开发服务器(HMR热更新) npm run build # 构建生产版本 npm run preview # 预览生产版本 ``` 核心特性: - 闪电般快速的冷启动(利用原生ES模块) - 即时热模块替换(HMR) - 按需编译(不打包整个应用) - 内置TypeScript支持 - 支持CSS预处理器 注意事项: 1. Vite默认使用ES模块规范,需确保浏览器支持(现代浏览器) 2. 生产构建使用Rollup打包 3. 开发环境不打包node_modules(依赖预构建) 4. 支持.env环境变量(VITE_前缀)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值