html单页面使用Vue3和ElementPlus

1. 使用CDN引用Vue3和Element-Plus

<!-- 引入Vue3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入element-plus样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<!-- 引入element-plus组件库 -->
<script src="https://unpkg.com/element-plus"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 导入跟组件挂载应用

<div id="app"></div>
const { createApp } = Vue;
createApp.mount('#app')

3. 完整页面逻辑

<div id="app">
   <div>
       <el-button type="primary" @click="handleClick">Primary</el-button>
   </div>
   <div>{{msg}}</div>
</div>
    <script>
        const { createApp } = Vue;
        createApp({
            data(){
                return{
                    msg:'hello world'
                }
            },
            created () {
                this.showUserList()
            },
            methods: {
                handleClick(){
                    this.msg = '明天会更好'
                },
                showUserList(){
                    //使用axios自定义配置，访问指定地址
                    const request = axios.create({
                        baseURL: 'http://hn216.api.yesapi.cn/'
                    })
                    request
                        .get('/api/App/Common_Express/Search',{
                            params: {
                                app_key:'EC617BD7A448885E49B06760F120',              
                            }
                        })
                        .then((res) => {
                            console.log('数据获取成功', res.data)
                            this.msg = res.data
                        })
                        .catch((error) => {
                            console.log('数据获取失败', error)
                        })
                }
            }
            // 全部引入ElementPlus
        }).use(ElementPlus).mount('#app')
    </script>