在html页面引入element-ui(CDN)

1,061 阅读1分钟

有效的方式

CDN方式引入
<!--引入vue2相应文件-->
<script src="https://unpkg.com/vue@2.6.13/dist/vue.js"></script>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

下面这样是无效的:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

原因:

https://unpkg.com/vue/dist/vue.js-->指向的是https://unpkg.com/vue@3.2.37/dist/vue.js
https://unpkg.com/vue/dist/vue.js-->https://unpkg.com/element-ui@2.15.9/lib/index.js

element-ui是基于Vue2的,所以要指定vue2的版本

Element Plus官网,基于Vue3的element-ui是这样引入的

  <!-- 导入样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 导入 Vue 3 -->
  <script src="//unpkg.com/vue@next"></script>
  <!-- 导入组件库 -->
  <script src="//unpkg.com/element-plus"></script>