Vite - 去中心化的前端构建工具

点击下方“青年码农”关注

回复“源码”可获取软件，源码等资料

Vite 是一个新一代的前端构建工具，由 Vue.js 核心团队成员尤雨溪（Evan You）开发，它的设计目标是提供一种更快、更简单的开发体验。与传统的打包构建工具不同，Vite 采用了基于浏览器原生 ES 模块的开发方式，能够在开发过程中实时编译打包，实现了秒级启动，开发体验更加流畅。

Vite 的主要特点包括：

• 快速启动：Vite 采用的是基于浏览器原生 ES 模块的开发方式，能够在开发过程中实时编译打包，实现了秒级启动；

• 开箱即用：Vite 集成了 Vue.js 和 React 等主流前端框架的开发环境，可以直接使用，无需额外配置；

• 插件扩展：Vite 支持插件机制，可以通过插件扩展其功能；

• 支持 TypeScript 和 JSX：Vite 支持 TypeScript 和 JSX 开发方式；

• 优化打包：Vite 通过提供优化选项，如按需导入和动态导入等，可以更好地优化打包结果。

下面我们从一个简单的流程入门 Vite ：

1. 安装

Vite可以使用 npm 或者 yarn 安装 Vite：

npm install -g vite
# 或者
yarn global add vite

2. 创建项目

在命令行中执行以下命令，创建一个新的 Vue.js 项目：

# 创建一个新的 Vue.js 项目
npm init vite-app my-project
# 进入项目目录
cd my-project
# 安装依赖
npm install

3. 启动项目

进入项目目录，执行以下命令启动项目：

npm run dev

启动后会在浏览器中打开一个新的窗口，展示初始的 Vue.js 项目页面。

4. 修改代码

在项目目录下找到 src 目录，在其中修改 App.vue 文件，可以看到修改后的结果会自动反映在浏览器中。

<template>
  <div>
    <h1>Hello Vite!</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Welcome to my Vite app!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
</style>

5. 构建项目

在命令行中执行以下命令，可以构建项目：

npm run build

构建后的文件位于 dist 目录下。然后就是正常不过的部署了。