前端 Vite

本文将介绍 Vite，下一代前端开发与构建工具。

一、什么是 Vite ？

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。

Vite 主要由两部分组成：

  • 开发时：基于原生 ES 模块的 “快速” 开发服务器
  • 打包时：使用 Rollup 打包代码，并且是预配置的，可输出高度优化过的静态资源

二、为什么选择 Vite ？

启动快！！！

三、Vite 开发 Vue2

1. 说明

Vite 默认提供 Vue2 项目的构建，因此希望使用 Vite 开发 Vue2 时需要做些工作。

2. 初始化 Vite 项目

1
npm init vite@latest

  • 输入项目名

  • 输入包名

  • 选择框架为 vanilla，即原生的

    vanilla 的原义是香草味，也被引申为原味

  • 选择 variant 或 variant-ts

执行 npm install 和 npm run dev 后，看到默认欢迎界面，便代表原生的 Vite 项目启动成功。

3. 安装 vite-plugin-vue2

vite-plugin-vue2 是 Vite 中对 Vue2 的支持插件。

(1) 安装

1
npm install vite-plugin-vue2 --dev

(2) 配置

在项目根目录下创建 vite.config.js 文件，输入以下代码：

1
2
3
4
5
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [createVuePlugin()]
}

4. 安装 Vue

1
2
npm install vue@版本号 -S
npm install vue-template-compiler@版本号

需要注意的是：

vue 和 vue-template-compiler 的版本号应该相同，否则将会报错。

5. 创建 App.vue

创建 src 文件夹，在 src 文件夹下创建 App.vue 文件，填写如下：

1
2
3
4
5
6
7
8
9
<template>
  <div>Hello Vite Vue2</div>
</template>

<script>
export default {
  name: "App.vue"
}
</script>

6. 修改 main.js

将 main.js 移动至 src 文件夹下，修改内容如下：

1
2
3
4
5
6
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

由于 main.js 的位置发生了移动，而 index.html 引用了 main.js，因此也需要修改 main.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

7. 运行

执行 npm run dev，打开浏览器查看 http://localhost:3000/，看到如下界面代表设置成功。

参考