vue3中使用elementui组件

vue3出来好一段时间了，一直想着用一下，今日集成elementui使用一下

首先创建一个vue3的基础项目执行以下命令

npm init @vitejs/app vue3Projece -- --template react

出现如图所示的选择，按上下键选择 vue 按回车就可创建一个vue3的项目

然后用编辑工具打开项目，这里演示用vsCode

集成elementUi环境 element兼容vue3的时候换成 element-plus 执行 npm install element-plus --save

目前组件还是测试版在main.js中集成组件 vue3换了写法，编译也换成了 vite，不得不说vite的编译速度远远超过了webpack

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

在Vue项目文件中使用这里直接上代码注意这里使用的时候把script的setup去掉要不然vue会报错提示找不到属性至于什么时候加setup 目前我也不太清楚

<template><div><el-row><el-button @click="open1">打开通知</el-button><el-button type="primary" @click="state.dialogVisible = true">弹框</el-button><el-button type="success" @click="open2">打开对话框</el-button><el-button type="info" @click="open3">通知消息</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button>
</el-row>
<el-dropdown><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><template #dropdown><el-dropdown-menu><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item disabled>双皮奶</el-dropdown-item><el-dropdown-item divided>蚵仔煎</el-dropdown-item></el-dropdown-menu></template>
</el-dropdown>
<el-dialogtitle="提示"v-model="state.dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><template #footer><span class="dialog-footer"><el-button @click="state.dialogVisible = false">取 消</el-button><el-button type="primary" @click="state.dialogVisible = false">确 定</el-button></span></template>
</el-dialog></div>
</template><script>
import { defineComponent, reactive} from 'vue';
import { ElMessage,ElMessageBox,ElNotification} from 'element-plus'export default defineComponent({setup() {  // setup钩子函数// 使用响应式函数reactive构建proxy响应式对象stateconst state = reactive({msg: '时光',dialogVisible:false})console.log(state); // state对象是一个proxy拦截对象let info = 'hello'; // info是一个普通对象，修改后不会被proxy拦截，进而页面也不会动态更新const changeMsg = () => { // 在外边定义methodsstate.msg = '时光，你好'info = 'hello，你好'}let open1=() =>{ElMessage({message: '恭喜你，这是一条成功消息',type: 'success'})}let open2=() =>{ElMessageBox.alert('这是一段内容', '标题名称', {confirmButtonText: '确定',callback: action => {this.$message({type: 'info',message: `action: ${ action }`});}})}let open3=() =>{ElNotification({title: '标题名称',message: '这是提示文案'})}return {  // 使用时，要把对象return出去，才能在template中使用state,info,changeMsg,open1,open2,open3}}
})
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

来几张效果图

目前来说组件兼容的时候使用的地方改变不大，也就是提示框的弹出，表单验证的获取，部分弹框的绑定上做了改变，vue3使用的时候，定义参数和方法的地方也改变了，直接在 defineComponent 的setup函数里面定义并返回。

vue3中使用elementui组件相关推荐

在uniapp中使用element-ui组件
在uniapp中使用element-ui组件一.安装依赖 npm i element-ui -S //安装依赖二.在根目录下新建一个element文件,写一个index.js文件,实现按需导入,会 ...
Vue第二章，在项目中使用element-ui组件
使用vue的童鞋相信都知道vue中有很多ui组件,这里推荐使用element-ui组件(个人测试还算强大,起码开发商野心不小),因为此组件可以集成到angular.react.vue任意一个框架中. ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
Mars3d的html 模板中使用element-ui 组件参考
首先重点是:不能直接用,需要使用webcomponent,基础项目里面有个demo可以参考以下是开发聊天记录:(供参考) SHMILY 10-13 10:30:59 大佬们这个层没办法定义成一 ...
Vue3中内置组件 Teleport 详解
1. 基本概念 1.1 简单理解不管是 Vue2 还是 Vue3 中都有内置组件的存在,如 component 内置组件.transition 内置组件等等.内置组件就是官方给我们封装的全局组件,我 ...
vue3中添加elementui插件
cnpm install element-plus --save 在项目中的src目录先的main.js中添加下面两行代码进行项目的导入 // 引入element-plus 插件 import El ...
解决 Vue 中的Element-ui 组件el-checkbox动态赋值点击没反应问题
<el-checkbox :value="form.test=== '1'" @change="val => $set(form,'test',val ? ' ...
html c 中messagebox,Element-Ui组件 MessageBox 弹框
基础用法消息提示弹框 ``` 点击打开 Message Boxexportdefault{ methods: { open() {this.$alert('这是一段内容','标题名称 ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...

vue3中使用elementui组件

vue3中使用elementui组件相关推荐

最新文章

热门文章