【Vue3+vite+Element-UI Plus 】

原创

已于 2022-01-22 16:50:04 修改 · 963 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #前端

于 2022-01-22 16:48:49 首次发布

本文介绍了如何在Vue3项目中结合vite和Element-UI Plus进行全局及按需配置。首先，通过vite创建Vue3项目，并安装Element-UI Plus包。接着，在main.js中全局注册组件，然后在具体组件中使用。对于按需配置部分，内容暂未展开。

1 Vue3 + vite + Element-UI Plus 全局配置

在终端中利用命令 npm init vite-app 项目名称 ,创建基于 vite 的 vue3 项目
利用命令 npm i element-plus --save 下载 element-ui plus 包
在 main.js 文件中注册组件

import {
   
    createApp } from 'vue'
import App from './App.vue'
// 全局配置element-ui 组件
import ElementPlus from 'element-plus'
// 引入组件样式
import '../node_modules/element-plus/dist/index.css'

const app = createApp(App

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

傻仔渣渣

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue 3 + Element Plus 简单用法

学习笔记

05-18

4276

Element Plus： A Desktop UI toolkit for Vue.js 即 Vue 桌面 UI 工具包。

精选资源

基于Vue3 + Vite5的Element-Plus后台管理前端模板设计源码

09-29

Element-Plus是基于Vue3的UI框架，它提供了大量常用的UI组件，这些组件经过精心设计，不仅美观而且功能强大，可以大幅度提升开发效率和产品体验。在本项目中，Element-Plus与Vue3及Vite的结合，标志着前端开发正在...

参与评论您还未登录，请先登录后发表或查看评论

1小时搞定Vue3+vite+Element UI或者Element Plus开发后台管理系统，使用vite构建管理项目，前后端分离包含mysql数据库，网站后台

编程小石头

04-29

5763

我们通常给小程序或者app开发后台时，不可避免的要用到可视化的数据管理后台，而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。

使用vite+vue3+ElementPlus+pinia搭建中后台应用-前端-1

最新发布

代码哈士奇的博客

10-30

884

新建文件这里可以写自己项目的样式。然后在main.ts引入比如我们这样写。#app {新建文件写一些自定义的主题控制台可能会报错，说你却少sass依赖，根据它的提示安装就好。在这里重写一些定义$colors: (),),),),'error': (),'info': (),),配置配置别名plugins: [vue(),}),}),],}),],resolve: {alias: {},

利用 Vue 3 + Vite + Element UI Plus 结合 Service Worker 实现版本管理

Bruce__taotao的博客

02-25

1837

旧版本在未手动刷新或重新加载页面前仍可继续使用，确保用户操作不中断。

Vue3+Element-Plus 实现用户列表页面的UI结构及动态加载表单功能三一

build2024

12-20

7826

1. 用户列表组件UI结构的组成 1.1 头部是一个面包屑（Breadcrumb）导航区域 1.2 白色区域是一个卡片（Card）视图 1.3 卡片（Card）视图中嵌套了输入框（Input ）、按钮（Button）、表单（Form）、分页（Pagination ） Breadcrumb 面包屑 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 2. 用户列表组件实..

vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

YuShiYue的博客

08-18

1904

一. 参考文档 vite官方文档 vue3.x官方文档 vue-router4.x官方文档 vuex4.x官方文档 element-ui3.x官方文档 Ant Design Vue2.x官方文档 axios文档二. vite搭建项目安装 # npm 安装 npm init vite@latest # yarn 安装 yarn create vite # 快速安装vue模板项目 yarn create vite my-vue-app --template vue npm init vite@la

一款用Vue3+Vite4+Element-Plus+TypeScript编写的后台管理系统，兼容移动端这个系统以其强大的功能和现代化的技术栈为开发者提供了一流的管理体验

04-07

Element-Plus是Element UI的Vue3版本，它提供了一系列基于Vue3的高质量UI组件，使得开发者能够快速构建出美观且一致的用户界面。TypeScript作为JavaScript的一个超集，它提供了静态类型检查，能够帮助开发者在编码...

精选资源

vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本

04-02

在这个 Vue3 版本中，开发者可以享受到 Vue3 的所有改进，同时利用 Vite5 的快速构建优势，以及 Element-Plus 提供的现代 UI 设计。 "vue3-element-admin_master.zip" 文件很可能是这个项目的源代码压缩包，解压后...

基于 vue3 + vite + element plus + avue3 + vue-router + vuex，适配手机、平

06-08

Element Plus是Element UI的升级版，适用于Vue3，提供了丰富的UI组件，用于构建企业级后台管理系统。 Avue3则是基于Vue3的后台管理框架，集成了Element Plus和一些自定义组件，旨在简化开发流程，提供一套完整的...

vue3+vite+element+plus 管理后台

07-28

将Vue3、Vite和Element Plus 用于重构CRMEB的管理后台，意味着开发者能够享受到Vue3带来的新特性和性能提升，同时利用Vite的快速开发体验，以及Element Plus简洁且功能强大的组件库来构建更加现代化和高效的管理后台...

Vue3+elementui plus创建项目的方法

01-18

1.使用elementui plus版本实现按需加载组件会报错 Error: Cannot find module ‘babel-preset-es2015’ from ‘D:\danzhukeji\danzhu\my_pp\src’ 这样的情况下 { presets: [[es2015, { modules: false }]], plugins: [ [ component, { libraryName: element-plus, styleLibraryName: theme-chalk

极简的vue3-vite-element-plus管理系统、input自定义密码组件.zip

01-04

Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。适用于初学者和有经验的开发者，能够帮助你快速上手Qt并掌握其高级特性。

vite-ts-vue3-element-plus

03-12

Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。推荐的IDE设置 + 。确保在设置中启用vetur.experimental.templateInterpolationService ！如果使用[removed] 是当前处于RFC阶段的功能。要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。 TS中.vue导入的类型支持由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码：如果使用手掌运行Volar: Switch TS Plug

vite + vue3 + elementui + pinia搭建

qq_41465138的博客

03-20

1549

vite + vue3 + elementui + pinia搭建

Vue3 + Vite3 + Element-Plus

weixin_45231907的博客

02-06

679

🎉🎉 Vue3 + Vite3 + Element-Plus 管理系统 🎉🎉介绍 📖vue-diverse-admin，基于 Vue3、TypeScript、Vite3、Element-Plus 开源的一套后台管理模板，项目均使用JS开发，但已经配置TS，可以JS、TS混用。目前功能还在持续更新中…您也可以删除其他直接使用Layout布局进行二次开发一、Git 仓库地址 (欢迎 Star⭐)二、🔨🔨🔨 项目功能🚀 使用 Vue3 开发。

vue3初始搭建项目完整教程 vue3 + vite + element-ui + axios

csdn_8023的博客

04-08

8707

搭建vue3+vite+element项目基础框架构建

1天搞定uniApp+Vue3+vite+Element UI或者Element Plus开发学习，使用vite构建管理项目,HBuilderX做为开发者工具

编程小石头

04-30

5665

vite+vue3+elementPlus搭建项目

Jocelyn_书

01-28

1598

vite+vue3+elementPlus搭建基础项目

vue3+vite下载element-plus

03-27

### 安装和配置 Element Plus 要在 Vue3 和 Vite 项目中安装和配置 Element Plus，可以按照以下方法操作： #### 1. 创建 Vue3 项目如果尚未创建 Vue3 项目，则可以通过 Vite 脚手架快速搭建环境。运行以下命令初始化一个新的 Vue3 项目[^2]: ```bash pnpm create vite my-project --template vue cd my-project ``` #### 2. 安装 Element Plus 及其依赖项在项目的根目录下执行以下命令来安装 `element-plus` 和它的图标库： ```bash pnpm install element-plus @element-plus/icons-vue ``` 这一步会将必要的包添加到项目的依赖列表中。 #### 3. 配置 main.ts 文件打开项目的入口文件 `src/main.ts` 并完成如下配置以实现全局注册 Element Plus 组件以及设置语言为中文[^3]: ```typescript import { createApp } from 'vue' import App from './App.vue' // 导入ElementPlus核心功能及其样式表 import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; // 如果需要使用图标库则单独导入 import * as Icons from '@element-plus/icons-vue'; const app = createApp(App); app.use(ElementPlus); // 设置国际化为中国地区，默认情况下是英文 import zhCn from 'element-plus/es/locale/lang/zh-cn'; app.config.globalProperties.$ELEMENT = { size: 'small', zIndex: 3000 }; app.use(ElementPlus, { locale: zhCn }); Icons.forEach((icon) => { app.component(icon.name, icon); }); app.mount('#app'); ``` 上述代码完成了对 Element Plus 的基本集成工作，并通过 `$ELEMENT` 属性定义了一些默认参数如组件大小与 z-index 值。 #### 4. 使用组件现在可以在任何 `.vue` 文件里直接调用 Element Plus 提供的各种 UI 控件而无需额外声明或引入它们[^1]。例如，在某个页面组件中加入按钮控件非常简单： ```html <el-button type="primary">Primary Button</el-button> ``` 以上过程即实现了基于 Vue3 和 Vite 构建的应用程序中成功集成了 Element Plus 库的功能。