前言：

vue3+vite的项目中使用 element-plus的教程。

官方地址：

安装 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/guide/installation.html#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9B%B4%E6%8E%A5%E5%BC%95%E5%85%A5

1、安装：

pnpm install element-plus -S

如果需要：cdn引入：index.html中加入下面的

  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /><script src="//unpkg.com/vue@3"></script><script src="//unpkg.com/element-plus"></script>

2、引入：

import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)

按需引入：需要安装额外的插件来支持

1）安装

npm install -D unplugin-vue-components unplugin-auto-import

2）vite.config.js

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

3、页面上使用：

组件官方地址：

Cascader 级联选择器 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/component/cascader.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

1、页面上直接用组件

<el-button>登录</el-button>

2、js中使用

import { ElMessage } from 'element-plus'ElMessage('this is a message.')ElMessage({message: 'Congrats, this is a success message.',type: 'success',})

vue3+vite使用element-plus相关推荐

Vue3+Vite+TypeScript+element Plus框架搭建过程（3）
代码地址,request分支:https://gitee.com/lsjWeiYi/vue3-frame/tree/request/ web到此还缺一个http请求功能,然后就可以实现功能了. 当前h ...
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了. 而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了. 主要是要熟练一下 Vue3,好准备用 Vue3 ...
【Vue3+vite+Element-UI Plus 】
1 Vue3 + vite + Element-UI Plus 全局配置在终端中利用命令 npm init vite-app 项目名称 ,创建基于 vite 的 vue3 项目利用命令 npm i ...
【几乎最全/全网最长的 2 万字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
文章目录一.完整构建流程 1.在指定目录下执行 pnpm init,初始化 package.json 2.执行 pnpm install vite -D,安装 vite. 3.package.jso ...
vue3+vite+element-plus
最近在学习vue3,尝试用vue3+vite重构了vue-admin-template项目项目地址预览地址如果你使用过vue-admin-template,此项目对你相当于无缝切换. 项目构建 ...
Vue3.0使用Element Plus组件报错[Vue warn]: Failed to resolve component: `el-XXXX` If this is a native custo
文章目录报错截图一.问题描述二.报错信息格式三.报错原因报错截图一.问题描述我的技术栈:Vue3+TypeScript+Vite+Element Plus 我的报错:Vue3 项目使用 ...
使用TypeScript（TS） + Vue3+ Vite实现贪吃蛇项目
贪吃蛇练习使用TypeScript + Vue3+ Vite实现贪吃蛇的例子: 效果展示: 每次刷新,食物会随机刷新在屏幕的位置,当分数到10后,等级会加1,随后移动的速度会增加,10级为最高难度. ...
使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架
使用vue3 + vite + elementPlus搭建一个项目脚手架这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目,步骤详细,献给不爱看文档的诸位,希望这 ...
使用 Vue3 + vite + elementUI 开发一个 Utools Markdown 编辑器插件
文章目录目的开发文档整理基础工具的集成初始化项目框架引入按需引用和 SASS 引入验证 utools 开发配置调试和打包插件功能实现依赖库的安装调用布局实现 Editor.vue ...

vue3+vite使用element-plus

前言：