【vue演练场安装 element-plus框架】

在线vue 演练场地址:

https://play.vuejs.org/

配置element-plus js map :

import Map:

{

  "imports": {

    "vue": "https://cdn.jsdelivr.net/npm/@vue/runtime-dom@3.4.0-beta.1/dist/runtime-dom.esm-browser.prod.js",

    "vue/server-renderer": "https://cdn.jsdelivr.net/npm/@vue/server-renderer@3.4.0-beta.1/dist/server-renderer.esm-browser.js",

    "element-plus": "https://unpkg.com/element-plus@2.4.3/dist/index.full.mjs"

  },

  "scopes": {}

}

css导入 用 <style> 标签@import url解决:

App.vue:

<script setup>
import { defineComponent, ref, getCurrentInstance } from 'vue'
import Comp from './Comp.vue'
import ElementPlus from 'element-plus'

getCurrentInstance().appContext.app.use(ElementPlus)

const msg = ref('Hello World!')
const value1 = ref('')
</script>

<template>
  <div>
    <el-button>{{ msg }}</el-button>
    <div class="block">
      <el-date-picker v-model="value1" type="datetime" placeholder="Select date and time"></el-date-picker>
    </div>
    <el-dropdown>
      <span class="el-dropdown-link">
        Dropdown List
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item disabled>Action 4</el-dropdown-item>
          <el-dropdown-item divided>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <Comp></Comp>
  </div>
</template>

<style >
   @import url("https://unpkg.com/element-plus@2.4.3/dist/index.css")
</style>

app.vue中 全局install element-plus组件:

import ElementPlus from 'element-plus'
 
getCurrentInstance().appContext.app.use(ElementPlus)