vite学习笔记 | 青训营

简介

Vite 是一个基于浏览器原生 ES 模块的开发服务器。它使用了 ES 模块作为标准 JavaScript 模块的格式，并通过使用浏览器原生的 import/export 特性，实现了一种直接运行源码的开发模式，从而提供了极快的热更新和快速冷启动时间。

安装

在开始使用 Vite 之前，我们需要先全局安装它:

npm install -g create-vite

安装完成后，我们可以使用以下命令来创建一个新的 Vite 项目:

create-vite my-project

开发

进入项目目录，运行以下命令启动开发服务器:

cd my-project
npm install
npm run dev

启动成功后，Vite 会监听源码文件变化，并自动更新浏览器界面。

配置

Vite 的配置文件被命名为 vite.config.js，它是一个 CommonJS 模块。你可以在配置文件中指定自定义的开发服务器端口号或者启用插件等。

下面是一个简单的配置文件示例:

// vite.config.js
module.exports = {
  server: {
    port: 3000
  }
}

使用插件

Vite 支持使用各种插件来增强功能。下面是一个使用 vue 插件的配置示例:

// vite.config.js
const { createVuePlugin } = require('vite-plugin-vue')

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

使用 Vue

Vite 默认使用 vue 作为开发的主要框架。我们可以使用以下命令来安装 vue:

npm install vue@next

然后在源码中导入并使用 vue，就像在一个普通的 JavaScript 文件中一样:

import { createApp } from 'vue'

// 创建 Vue 应用
const app = createApp({
  data() {
    return {
      message: 'Hello, Vite!'
    }
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `
})

// 挂载应用到 DOM
app.mount('#app')

构建

当我们完成开发并准备部署到生产环境时，我们可以使用以下命令构建项目:

npm run build

构建完成后，Vite 会在项目根目录生成一个 dist 文件夹，里面包含了所有构建后的文件，可以直接在生产环境中使用。

总结

通过本次学习，我了解了如何使用 Vite 来开发和构建项目。Vite 提供了一个快速的开发服务器以及强大的构建能力。它支持各种插件，可以与不同的框架一起使用，如 Vue、React 等。希望通过学习和实践，可以更加熟练地使用 Vite 来进行前端开发工作。