美文网首页
vue3中使用element-plus

vue3中使用element-plus

作者: 顺其自然AAAAA | 来源:发表于2021-12-16 23:45 被阅读0次

    先来一个官方文档:https://element-plus.gitee.io/zh-CN/guide/design.html

    一、安装(这里使用的是全局安装)

    # 选择一个你喜欢的包管理器
    
    # NPM
    $ npm install element-plus --save
    
    # Yarn
    $ yarn add element-plus
    
    # pnpm
    $ pnpm install element-plus
    

    二、引入 (在main.js中引入)

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

    注意:和一开始创建的main.js文件是有区别的

    三、使用

    <template>
      <div class="container">
        <el-button type="primary" @click="handleTab">点击弹框</el-button>
      </div>
      
    </template>
    
    <script>
    import {reactive} from 'vue'
    import { ElMessage } from 'element-plus'
    export default {
      name: 'App',
      setup() {
        let data = reactive({
          name: '范坚强',
          obj: {
            age: 28
          }
        })
        function handleTab() {
          ElMessage('this is a message.')
        }
        
        return {
          data,
          handleTab
        }
      }
    }
    </script>
    

    暂时写到这里,后续更新中。。。

    相关文章

      网友评论

          本文标题:vue3中使用element-plus

          本文链接:https://www.haomeiwen.com/subject/ntpbfrtx.html