如何在 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)
- 真正的按需编译
听上去就很不错,立刻上手尝试一下。
初始化 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的更多相关文章
- 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- vue项目中使用element ui上传图片到七牛
1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...
- 【转】如何在IOS中使用3D UI - CALayer的透视投影
原文网址:http://www.tairan.com/archives/2041/ 例子代码可以在 http://www.tairan.com/thread-3607-1-1.html 下载 iOS的 ...
- 如何在 Rails 中搭配 Turbolinks 使用 Vue
[Rails] Vue-outlet for Turbolinks 在踩了 Rails + Turbolinks + Vue 的許多坑後,整理 的作法並和大家分享. Initialize the A ...
- vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用
需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...
- element UI+vue关于日期范围选择的操作,picker-options属性的使用
一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...
随机推荐
- POJ1422
题目大意: 一个有向无环图,求最小路径覆盖 板子题... 把每个点拆成\(x\)和\(x^{'}\) \((u,v)\)有一条边则\(u\)向\(v^{'}\)连一条边,然后跑最大匹配,最小路径覆盖= ...
- JOISC2020 自闭记
以下是我考场上的思路,很多题都不是正解.对于某些题目,我们使用<代码部落>中的题解,希望大家能够看懂 JOISC2020 Round1 自闭记 T1 11 pts 算法:考虑\(DP\). ...
- Python3中zipfile模块文件名乱码问题
inux下zip文件乱码已经是一个常见问题了,再加上python想不遇到乱码问题都难. 在zipfile.ZipFile中获得的filename有中日文则很大可能是乱码,这是因为 在zip标准中,对文 ...
- day108:MoFang:首页检测用户是否登录&在项目中使用MongoDB&用户页面更新用户信息&交易密码界面实现
目录 1.首页页面也要检测用户是否登录 2.在flask中使用MongoDB 3.用户页面更新用户信息 4.交易密码界面/密码修改界面/昵称修改界面初始化 5.交易密码实现 1.首页页面也要检测用户是 ...
- 如何更简单的使用Polly
Polly 弹性瞬时错误处理库 Polly是一个C#实现的弹性瞬时错误处理库 它可以帮助我们做一些容错模式处理,比如: 超时与重试(Timeout and Retry) 熔断器(Circuit Bre ...
- sqli-labs less11-12(post型union注入)
less-11 post型union注入 过程: 输入admin admin 判断username password的闭合方式 对username查字段个数 ' union select 1,2# ' ...
- ORACLE11g Dataguard物理Standby 日常巡检操作手册
ORACLE11g Dataguard物理Standby日常巡检操作手册 编写:_____________校对:_____________日期:_____________ 目录1.DG环境的日常巡检 ...
- Java File类的简单使用
Java File的简单使用(创建.删除.遍历.判断是否存在等) Java文件类以抽象的方式代表文件名和目录路径名.该类本身不能用来读数据或写数据,它主要用于磁盘上文件和目录的创建.文件的查找和文件的 ...
- windows 上的MySQL默认字符集设置踩过的坑
前言: 前几天刚买了新电脑,装上MySQL有几天了,今天没事试了一下,发现默认字符集没有修改,还是默认的latin1,折腾了大半天,终于搞好了. 这是我成功设置后的结果图: 命令式直接在MySQL界面 ...
- 面试 16-01.MVVM
16-01.MVVM #前言 MVVM的常见问题: 如何理解MVVM 如何实现MVVM 是否解读过Vue的源码 题目: 说一下使用 jQuery 和使用框架的区别 说一下对 MVVM 的理解 vue ...