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-dialog
  title="提示"
  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响应式对象state
    const state = reactive({
      msg: '时光',
      dialogVisible:false
    })
    console.log(state); // state对象是一个proxy拦截对象
    let info = 'hello'; // info是一个普通对象，修改后不会被proxy拦截，进而页面也不会动态更新
    const changeMsg = () => { // 在外边定义methods
      state.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函数里面定义并返回。