如何在 index.html 中使用 Vue 和 ElementUI

要在 index.html 中使用 Vue 和 ElementUI，首先需要在 HTML 文档的头部中导入 Vue 和 ElementUI 的 CDN 链接。具体步骤如下：

在 HTML 文档头部中导入 Vue 和 ElementUI 的 CDN 链接。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>My App</title>
  <!-- 导入 Vue 的 CDN 链接 -->
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  <!-- 导入 ElementUI 的 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>
</head>
<body>
  <div id='app'>
    <!-- 在此处编写 Vue 模板 -->
  </div>
</body>
</html>

在 Vue 模板中使用 ElementUI 组件。

<div id='app'>
  <el-button type='primary'>按钮</el-button>
</div>

在 Vue 实例中注册 ElementUI 组件。

new Vue({
  el: '#app',
  components: {
    'el-button': ElementUI.Button
  }
})

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>My App</title>
  <!-- 导入 Vue 的 CDN 链接 -->
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  <!-- 导入 ElementUI 的 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>
</head>
<body>
  <div id='app'>
    <el-button type='primary'>按钮</el-button>
  </div>

  <script>
    new Vue({
      el: '#app',
      components: {
        'el-button': ElementUI.Button
      }
    })
  </script>
</body>
</html>