使用 Vite 快速搭建 Vue 2开发环境

前言

随着前端技术的不断进步，开发工具也在不断演进。Vite 作为一种新型的前端构建工具，以其快速的启动时间和高效的模块热更新（HMR）特性，受到了广大开发者的青睐。本文将详细介绍如何使用 Vite 搭建 Vue 2.7 的开发环境，并集成一些常用的开发依赖，如 SCSS 和 Element UI。通过本文，读者将学会如何快速搭建一个高效、现代化的 Vue 2.7 项目。

正文

1. 介绍 Vite

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

开发服务器：基于原生 ES 模块提供丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
构建指令：使用 Rollup 打包代码，并预配置输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时其插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

2. 搭建 Vue 2.7 开发环境

2.1 安装 Vite 脚手架

首先，我们需要使用 Vite 脚手架创建一个新的项目：

shell 复制代码

npm create vite@latest

按照提示选择项目名称和框架。例如，选择 vue2-vite 作为项目名称，并选择 Vue 2 模板。

shell 复制代码

cd vue2-vite
npm i
npm run dev

2.2 安装 Vue 2.7 插件

为了支持 Vue 2.7，我们需要安装 @vitejs/plugin-vue2 插件：

shell 复制代码

npm i -D @vitejs/plugin-vue2

然后，在 vite.config.js 中配置插件：

javascript 复制代码

// vite.config.js
import vue from '@vitejs/plugin-vue2'

export default {
  plugins: [vue()]
}

2.3 修改入口文件

修改 index.html 文件，确保正确引入入口文件：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.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>

2.4 安装 Vue 2.7

安装 Vue 2.7：

shell 复制代码

npm i vue@2

创建 src/main.js 和 src/App.vue 文件：

javascript 复制代码

// src/main.js
import Vue from 'vue'
import App from './App.vue'

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

vue 复制代码

<!-- src/App.vue -->
<template>
  <div>
    {{ msg }}
    <div>{{ msg1 }}</div>
  </div>
</template>

<script>
export default {
  // 配置选项API  optionsAPI
  data() {
    return {
      msg: 'hello vue2+vite'
    }
  },
  // 组合式API  compositionAPI
  setup() {
    let msg1 = '你好 vue2和vite'
    return { msg1 }
  }
}
</script>

<style scoped lang="scss"></style>

启动项目并预览效果：

shell 复制代码

npm run dev

3. 集成开发依赖

3.1 支持 SCSS

安装 SCSS 支持：

shell 复制代码

npm i -D sass

3.2 引入 Element UI

安装 Element UI：

shell 复制代码

npm i element-ui -S

在 src/main.js 中引入并使用 Element UI：

javascript 复制代码

// src/main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

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

总结

通过本文的介绍，我们成功地使用 Vite 搭建了一个 Vue 2.7 的开发环境，并集成了 SCSS 和 Element UI。Vite 的快速启动时间和高效的模块热更新特性，使得开发体验得到了显著提升。希望本文能帮助读者快速上手 Vite 和 Vue 2.7，提高开发效率。