VUE——引入Element-plus

zhuce276200

已于 2024-10-08 16:52:56 修改

阅读量182

点赞数 2

分类专栏： vue 文章标签： vue.js

于 2024-09-30 10:18:59 首次发布

本文链接：https://blog.csdn.net/zhuce276200/article/details/142650175

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

1. 安装
2. 引入
- 2.1 安装插件
- 2.2 设置vite
3. 使用

采用按需导入方式

1. 安装

引用自Element-plus 官网

# pnpm element-plus
pnpm install element-plus

2. 引入

官网推荐 >按需导入

2.1 安装插件

# pnpm 按需导入插件
pnpm install -D unplugin-vue-components unplugin-auto-import

2.2 设置vite

引自官网

// vite.config.ts
import { defineConfig } from 'vite'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. 使用

在 .vue中使用，例如App.vue。

<script setup lang="ts">
const handleClick = () => {
  ElMessage.success("按需导入成功！")
}
</script>

<template>
  <header>
    <el-button type="danger" icon="Edit" @click="handleClick"> 按钮</el-button>
  </header>

<!--  <RouterView />-->
</template>

初次使用时，ElMessage报红，解决办法如下：

先运行项目，pnpm run dev;
项目目录下生成2个文件，auto-imports.d.ts, components.d.ts;
在tsconfig.app.json或者tsconfig.json中引入上面2个文件

"include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "auto-imports.d.ts",
    "components.d.ts",
  ],

重新打开项目