Vue3中使用element-plus

Element-Plus的使用

1、项目中安装：

npm i element-plus -S

2、main.ts文件中引入注册

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

全局注册之后就可以在项目中需要的地方引入相关组件代码即可

值得注意的事：

在Vue3的setup函数中无法通过this拿到当前vue实例化对象，可通过以下方法来替代：

import { defineComponent, getCurrentInstance, reactive, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'

export default defineComponent({
    setup(){
        // 获取当前实例
    	const { ctx } = getCurrentInstance() as any
    	// 这里定义的ref必须与表单中用的ref同名,记得return出去
    	const rulesForm = ref()
        const methods = {
            submitForm(){
                // 1、通过getCurrentInstance钩子获取DOM
        		ctx.$refs.rulesForm.validate((validate: any) => {})
            }
            resetForm() {
                // 2、使用ref获取DOM
                rulesForm.value.resetFields()
                console.log('表单重置')
                // 3、引入组件
                ElMessage({
                  type: 'success',
                  message: '表单重置成功',
                })
          	},
        }
    	return {...method,rulesForm}
    } 
})

另外关于样式的事项：

安装常规样式：npm i normalize.css

main.ts文件中引入：import ‘normalize.css’