element-plus的CDN引用以及結合VUE3使用

紳士的可怖發表於2020-11-18
Vue

element-plus

npm 安裝
推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

npm install element-plus --save

CDN
目前可以通過 unpkg.com/element-plus 獲取到最新版本的資源，在頁面上引入 js 和 css 檔案即可開始使用。

引入樣式
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
引入元件庫
<script src="https://unpkg.com/element-plus/lib/index.js"></script>

具體程式碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

相關文章