Element Plus - daniel-qa/Vue GitHub Wiki

Element Plus #

  • Element Plus CDN
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>

  app.use(ElementPlus); // 使用 Element Plus
  app.mount('#app');

Demo

一個 HTML 檔

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue CDN Example</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
  <div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
	
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="Option 1" value="Value 1" />
      <el-checkbox label="Option 2" value="Value 2" />
    </el-checkbox-group>
  </div>

  <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
  <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
  <script>
    // 创建一个Vue 应用
    const app = Vue.createApp({
      data() {
        return {
          checkList: [] // 用于存储选中的值
        };
      }
    });

    // 定义一个名为 button-counter 的新全局组件
    app.component('button-counter', {
      data() {
        return {
          count: 0
        };
      },
      template: `
        <button @click="count++">
          点了 {{ count }} 次！
        </button>`
    });

    app.use(ElementPlus); // 使用 Element Plus
    app.mount('#app');
  </script>
</body>
</html>

拆開:一個 HTML 檔，一個 Vue 檔

index.html 是首先被解析的。

app.js 在解析到 <script> 标签时被加载和执行。

  • index.html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue CDN Example</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
  <div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
	
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="Option 1" value="Value 1" />
      <el-checkbox label="Option 2" value="Value 2" />
    </el-checkbox-group>
  </div>

  <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
  <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
  <script src="app.js"></script>
</body>
</html>
  • app.js
// 创建一个Vue 应用
const app = Vue.createApp({
  data() {
    return {
      checkList: [] // 用于存储选中的值
    };
  }
});

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    };
  },
  template: `
    <button @click="count++">
      点了 {{ count }} 次！
    </button>`
});

app.use(ElementPlus); // 使用 Element Plus
app.mount('#app');
⚠️ **GitHub.com Fallback** ⚠️