关于javascript:如何在-Vite-中使用-Element-UI-Vue-3

在上篇文章《2021 新年 Vue3.0 + Element UI 尝鲜小记》里，咱们尝试应用了 Vue CLI 创立 Vue 3 + Element UI 的我的项目，而 Vue CLI 实际上为咱们生成了一个咱们相熟的 Webpack 工程项目。

Webpack 无需过多介绍，一个非常弱小的打包工具。但 Webpack 也有有余的中央，比方第一次打包须要很长时间，批改代码之后的热更新速度较慢。

随着 Vue 3 一起推出的还有一个弱小的新一代打包工具 Vite, 一个面向古代浏览器，基于原生模块零碎 ESModule 实现了按需编译的 Web 开发构建工具，恰好就解决了上述 Webpack 的痛点。Vite 次要的劣势有三点：

疾速冷启动服务器
即时热模块更换（HMR）
真正的按需编译

听下来就很不错，立即上手尝试一下。

应用

npm init @vitejs/app my-vue-app --template vue

命令疾速生成一个应用 Vite 构建的 Vue 3 我的项目模版。
运行 npm run dev 即可把我的项目跑起来，进入开发模式。我的项目冷启动速度十分快，不到 1 秒钟，浏览器里就曾经呈现我的项目预览了。我的项目冷启动只用了 382ms，真香。

开发我的项目，首先要筛选一个 UI 组件库。目前市面上反对 Vue 3 的组件库并不多，Element UI 不负众望曾经实现反对了。Element Plus 是饿了么 Element UI 团队推出的适配了 Vue 3 的全新版本，新增了很多实用组件，体验十分好。

Vite 工程引入 Element Plus 的办法也很简略，首先装置

npm i element-plus

而后批改我的项目入口文件，引入 Element Plus 库和相干款式文件

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')

重新启动我的项目，就能够欢快的应用 Element Plus 了。当初咱们再来体验一下即时热更新性能，批改一下 App.vue 文件，新增一个 Button

<el-button type="primary"> Element UI </el-button>

保留文件，简直同一时间，浏览器我的项目预览就实现了更新，热更新工夫简直能够忽略不计。

Vite 应用了最新浏览器的个性，给咱们带来了更好的开发体验。目前的相干生态如 Element UI 都曾经完满反对，能够在新我的项目里尝试用起来了。

我的项目源代码能够参考：https://github.com/element-plus/element-plus-vite-starter

关于javascript:如何在-Vite-中使用-Element-UI-Vue-3

初始化 Vite 我的项目

引入 Element Plus UI 组件库

小结