2025年3月15日 星期六 甲辰(龙)年 月十四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:02-13来源:作者:点击数:19
前言

随着前端技术的不断进步,开发工具也在不断演进。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 脚手架创建一个新的项目:

  • npm create vite@latest
在这里插入图片描述
在这里插入图片描述

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

  • cd vue2-vite
  • npm i
  • npm run dev
2.2 安装 Vue 2.7 插件

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

  • npm i -D @vitejs/plugin-vue2

然后,在 vite.config.js 中配置插件:

  • // vite.config.js
  • import vue from '@vitejs/plugin-vue2'
  • export default {
  • plugins: [vue()]
  • }
2.3 修改入口文件

修改 index.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:

  • npm i vue@2

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

  • // src/main.js
  • import Vue from 'vue'
  • import App from './App.vue'
  • new Vue({
  • render: (h) => h(App)
  • }).$mount('#app')
  • <!-- 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>

启动项目并预览效果:

  • npm run dev
3. 集成开发依赖
3.1 支持 SCSS

安装 SCSS 支持:

  • npm i -D sass
3.2 引入 Element UI

安装 Element UI:

  • npm i element-ui -S

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

  • // 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,提高开发效率。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐