vue3 + vite全局引入element-plus后使用 Message 消息提示

安装Element plus：

pnpm install element-plus

安装unplugin-element-plus

 自动导入组件

pnpm i -D unplugin-auto-import

pnpm install -D unplugin-element-plus

vite.config.ts 

使用plugins数组里配置，自动导入

import { fileURLToPath, URL } from 'node:url'

import { ConfigEnv, defineConfig, loadEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //引入api自动导入插件
import IconsResolver from 'unplugin-icons/resolver'
import ElementPlus from 'unplugin-element-plus/vite'

import UnoCSS from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
   //..
    plugins: [
      vue(),
      vueJsx(),
      UnoCSS(),
      ElementPlus({}),
      AutoImport({
        imports: ['vue', 'vue-router'],
        resolvers: [ElementPlusResolver(), IconsResolver({})],
        // 在src目录下生成一个指令文件存放各种全局指令
        dts: 'src/typings/auto-import.d.js'
      }),
      // 自动注册组件
      Components({
        resolvers: [ElementPlusResolver(), IconsResolver()],
        // dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url))
        dts: "src/typings/components.d.ts",
      }),
      Icons({
        autoInstall: true
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
})

视图xx.vue页面中直接使用： 

ElMessage.warning('级别最大只能为2')

案例源码AllTreeView.vue

<template>
  <div class="about">
    <h1>This is an Login page</h1>
    <br/>
    <el-divider/>
    <h4>树结构控制·</h4>

    <el-text></el-text>
    <el-divider/>
    <el-tree
      ref="menutree"
      style="max-width: 600px"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :data="treeData"
      draggable
      :expand-on-click-node="false"
      default-expand-all
      node-key="id"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      class="tree"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node1">
          <div>{{ node.label }}</div>
          <div style="margin-left: 40px;">
            <el-button type="text" size="mini" v-if="data.up"
                       @click="menuMoveF(node, data, 'up')">上移<i class="el-icon-top"></i></el-button>
            <el-button
              type="text" size="mini" v-if="data.down"
              @click="menuMoveF(node, data, 'down')">下移
              <i class="el-icon-bottom"></i></el-button>
          </div>
          <div style="margin-left: 20px;">
            <el-button @click="append(node,data)" type="primary" v-if="data.subNode"> 添加子级</el-button>
            <el-button style="margin-left: 18px" @click="remove(node, data)" v-if="data.delete"> 删除</el-button>
          </div>
        </div>
      </template>
    </el-tree>

  </div>
</template>
<script setup lang="ts">
import {userStore} from "@/stores/user.ts";
import {storeToRefs} from "pinia";

import type Node from 'element-plus/es/components/tree/src/model/node'
import type {DragEvents} from 'element-plus/es/components/tree/src/model/useDragNode'
import type {AllowDropType, NodeDropType,} from 'element-plus/es/components/tree/src/tree.type'
import _, {cloneDeep} from "lodash";
import {ElMessage} from "element-plus";

const handleClick = () => {
  msg.value = msg.value + ',hello'
  alert('点了一下了55555~~~')
}
const msg = ref('hello')

//获取当前登录的用户信息，pinia全局变量store
const store = userStore() //返回一个Proxy object
console.log('|--user store', store)// 拿pinia 里真正的全局对象数据

console.log('|--user  store to refs', storeToRefs(store))// 拿pinia 里真正的全局对象数据
const {userInfos} = storeToRefs(store); // 返回对象，解构出来的userInfos， 是响应式的proxy(object)


// 移动点击函数(node：当前节点，data：当前节点的data，type：区分上下移动)
function menuMoveF(node, data, type) {
  console.log('|--node', node)
  // 将变动之前的node备份
  let copyNode = {...node};
  copyNode = cloneDeep(node)
  // copyNode.previousSibling = {...node.previousSibling};
  // copyNode.nextSibling = {...node.nextSibling};
  console.log('|--copyNode', copyNode)
  window.sessionStorage.setItem(
    "menuNode",
    // copyNode
    // CircularJSON.stringify(copyNode)
    JSON.stringify(copyNode)
    // _.cloneDeep(copyNode).toString()
    // _.cloneDeep(copyNode)
  );
  console.log('|--', _.cloneDeep(copyNode))
  let nodeData = {};
  console.log('|-  window.sessionStorage.getItem("menuNode")', window.sessionStorage.getItem("menuNode"))
  if (type === "up") {
    // 上移
    if (node.previousSibling) {

      this.$refs.menutree.remove(node.data);// 删除原先的node
      // 拿到copy的node
      // nodeData = CircularJSON.parse(
      nodeData = JSON.parse(
        window.sessionStorage.getItem("menuNode")
      );
      console.log('|--nodedata', nodeData)
      // 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)
      this.$refs.menutree.insertBefore(
        nodeData.data,
        nodeData.previousSibling.data
      );
      window.sessionStorage.removeItem("menuNode");
    } else {
     E("该菜单已经是当前层最上级");
    }
  } else {
    // 下移
    if (node.nextSibling) {
      this.$refs.menutree.remove(node.data);
      nodeData = CircularJSON.parse(
        window.sessionStorage.getItem("menuNode")
      );
      // 参数：1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node
      this.$refs.menutree.insertAfter(
        nodeData.data,
        nodeData.nextSibling.data
      );
      window.sessionStorage.removeItem("menuNode");
    } else {
     ElMessage.warning("该菜单已经是当前层最下级");
    }
  }
}

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log('drag start', node)
}
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag enter:', dropNode.label)
}
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag leave:', dropNode.label)
}
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log('tree drag over:', dropNode.label)
}
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('|--拖拽完成，位置未改变，null none--|--tree drag end:', dropNode && dropNode.label, dropType)

}
/*
* 拖拉松开，item移动完成
* */
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('|--结点放下tree drop:', dropNode.label, dropType)
  return false
}
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  console.log('|--正在拖拽draggingNode', draggingNode)
  console.log('|--dropNode', dropNode)
  if (dropNode.level >= 2) {
    return false
  }
  if (dropNode.data.label === 'Level two 3-1') {
    console.log('|--不允许放到：Level two 3-1')
    return type !== 'inner'
  } else {
    return true
  }
}
const allowDrag = (draggingNode: Node) => {
  return !draggingNode.data.label.includes('Level three 3-1-1')
}

const treeData = ref([
  {
    label: 'Level one 1',
    up: false, down: true, subNode: true, delete: false,
    children: [
      {
        label: 'Level two 1-1',
        up: false, down: true, subNode: true, delete: true,
      },
    ],
  },
  {
    label: 'Level one 2',
    up: false, down: true, subNode: true, delete: true,
    children: [
      {
        label: 'Level two 2-1',
        up: false, down: true, subNode: false, delete: true,
      },
      {
        label: 'Level two 2-2',
      },
    ],
  },
  {
    label: 'Level one 3',
    up: false, down: true, subNode: true, delete: true,
    children: [
      {
        label: 'Level two 3-1',
        up: false, down: true, subNode: false, delete: true,
      },
      {
        label: 'Level two 3-2',
        up: false, down: true, subNode: false, delete: true,
      },
    ],
  },
])
let id = 1000;


//添加节点
function append(node, data) {
  console.log('|--添加', node, data)
  if (node.level >= 2) {
    ElMessage.warning('级别最大只能为2')
    return
  }
  const newChild = {id: id++, label: '级别2' + id, children: [], up: true, down: true, subNode: false, delete: true,}
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)
}

//移除节点
function remove(node, data) {
  const parent = node.parent;
  const children = parent.data.children || parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  children.splice(index, 1);
}

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

.el-tree .el-tree-node__content {
  height: 50px !important;
  border-top: 1px solid #aaa;
  min-width: 500px;
}

.tree {
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
}

.custom-tree-node1 {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px;
  height: 50px;
}
</style>