elementui 如何在一个html文件中直接使用?

要在一个HTML文件中直接使用ElementUI,你需要遵循以下步骤:

  1. 引入Vue.js: 因为ElementUI是基于Vue.js构建的,所以首先需要引入Vue.js库。你可以通过CDN链接来引入Vue.js的最新版本或指定版本:
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  1. 引入ElementUI: 接着,同样通过CDN引入ElementUI的CSS和JavaScript文件。这里也是使用CDN链接:
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  1. 创建Vue实例并使用ElementUI组件: 在你的HTML中,创建一个Vue实例,并挂载到页面上。在Vue实例中,你可以开始使用ElementUI的组件。
<div id="app">
  <el-button type="primary">点击我</el-button>
</div>

<script>
  new Vue({
    el: '#app'
  });
</script>

以上代码示例展示了如何在HTML文件中引入Vue.js和ElementUI,并使用了一个简单的ElementUI按钮组件(<el-button>)。

请注意,由于ElementUI主要设计用于Vue.js 2.x,如果你正在使用Vue 3,可能需要使用Element Plus,它是ElementUI的Vue 3兼容版本。引入Element Plus的方式类似,但你需要替换CDN链接为Element Plus的相应资源。

Was this helpful?

0 / 0

发表回复 0