f12 报错 XX is not defined ,引入elementplus后html页面无法正确显示,关于cdn引入的问题

本文链接：https://blog.csdn.net/zhangyujiao_wb/article/details/140948537

1.通过cdn引入资源需要注意引入顺序:
确保依赖关系正确（如先引入Vue，再引入基于Vue的其他库）。
下图中如果不把vue3的依赖放在第一个,就无法解析elementplus和icon的依赖

我是下载到了本地的,复制cdn地址,到浏览器里面搜索直接ctrl+s下载到本地即可
不能颠倒顺序不然就跟我一样找错误找几个小时

2.引入了cdn资源后再用以下格式引入资源包中的组件

  const { createApp } = Vue
  const { Menu , IconMenu, Message, Setting } = ElementPlus

不要用以下导入方式,那是用npm安装的用法,cdn是轻量级导入用不了这个,反正我用不了

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

根据elementplus,Vue3的官方文档,缺什么引用什么
elementplus:https://element-plus.org/zh-CN/
vue3:https://cn.vuejs.org/

3.记得挂载vue3语法

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

结束！

这些个问题对于新手来说真是灾难性的,
当时html页面只有几个字没有出现样式,
修了好久bug得不到一点反馈