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

Webpack 无需过多介绍,一个十分强大的打包工具。但 Webpack 也有不足的地方,比如第一次打包需要很长时间,修改代码之后的热更新速度较慢。

随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具,恰恰就解决了上述 Webpack 的痛点。Vite 主要的优势有三点:

  • 快速冷启动服务器
  • 即时热模块更换(HMR)
  • 真正的按需编译

听上去就很不错,立刻上手尝试一下。

初始化 Vite 项目

使用

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

命令快速生成一个使用 Vite 构建的 Vue 3 项目模版。

运行 npm run dev 即可把项目跑起来,进入开发模式。项目冷启动速度非常快,不到 1 秒钟,浏览器里就已经出现项目预览了。项目冷启动只用了 382ms,真香。

引入 Element Plus UI 组件库

开发项目,首先要挑选一个 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

如何在 Vite 中使用 Element UI + Vue 3的更多相关文章

  1. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  2. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

  3. php项目中使用element.ui和vue

    1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...

  4. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  5. vue项目中使用element ui上传图片到七牛

    1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...

  6. 【转】如何在IOS中使用3D UI - CALayer的透视投影

    原文网址:http://www.tairan.com/archives/2041/ 例子代码可以在 http://www.tairan.com/thread-3607-1-1.html 下载 iOS的 ...

  7. 如何在 Rails 中搭配 Turbolinks 使用 Vue

    [Rails] Vue-outlet for Turbolinks 在踩了 Rails + Turbolinks + Vue 的許多坑後,整理  的作法並和大家分享. Initialize the A ...

  8. vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用

    需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...

  9. element UI+vue关于日期范围选择的操作,picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

随机推荐

  1. AcWing 232. 守卫者的挑战

    题目链接 大型补档计划. 比较显然的dp 设 \(f[i][j][k]\) 为前 \(i\) 次,擂台上了 \(j\) 次,空闲容量(背包 - 使用的)为 \(k\) 的概率. 不上擂台的转移:\(f ...

  2. DarkMode(1):产品应用深色模式分析

    为什么Dark Mode变得越来越流行 2018 年的 macOS Mojave 率先支持了深色外观,紧接着 Windows 10 在 2018 年的 10 月份大版本更新中,也引入了 Dark Mo ...

  3. celery定时执行任务 的使用

    1 参照博客 https://www.cnblogs.com/xiaonq/p/9303941.html#i1 1 创建celery_pro包   # 可在任意文件下 2 在 celery_pro 下 ...

  4. el-amap 遮罩(带洞多边形)

    el-amap 遮罩(带洞多边形) 遮罩(带洞多边形) 效果图 代码 <template> <div> <el-amap vid="amapDemo" ...

  5. The Linux Scheduler: a Decade of Wasted Cores

    The Linux Scheduler: a Decade of Wasted Cores 这是一篇介绍Linux调度问题的文章,源自这篇文章.文章中涉及到的一些问题可能已经得到解决,但可以学习一下本 ...

  6. Nginx(三):反向代理,负载均衡

    环境准备   配置反向代理,负载均衡,动静分离需要的必备环境,JDK,2个tomcat开启8080和8081端口. 安装jdk [root@localhost ~]# rpm -qa|grep jav ...

  7. JDBC中SQL语句与变量的拼接

    变量为 keyWords String sql = "select id from t_user order by id + '"+keyWords+"';";

  8. Django + FastDFS (分布式远程服务器存储文件)

    之前随笔过一篇Docker来搭建分布式文件系统FastDfs就跳过了 https://www.cnblogs.com/xcsg/p/10901461.html FastDFS的Python  (dja ...

  9. python装饰器学习详解-函数部分

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 最近阅读<流畅的python>看见其用函数写装饰器部分写的很好,想写一些自己的读书笔记. ...

  10. jxl导出Excel中需要跳过的的坑

    正如上篇文章(JXL封装不能使用static关键字问题)所说,在jxl导出Excel时候如果频繁使用到WritableCellFormat去设置单元格的样式,这个时候经常会出现两种情况: 1.报警告: ...