010 Element-Plus集成

React+AntDesign+MUI

Vue3+VantUI

UI组件库（框架）->封装通用组件->后台管理系统=>element(UI(vue2)/Plus(vue3))=>饿了么团队(阿里)=>Vue

AntDesignUI=>蚂蚁金服=>React框架

AntDesignVue=>Vue框架

 

一、Element Plus UI组件库

Element Plus 基于Vue3、面向设计师和开发者的组件库

二、集成方案：

安装：https://element-plus.org/zh-CN/guide/quickstart.html

导入：

pnpm越来越流行

 

我们这里还是安装npm install element-plus

 

 全局引入

 app.use()

use  的作用是使用插件。如果是一个函数use就会执行那个函数，并且给他搞一个app

use的内部源码这样做的：拿到所有的组件，对所有组件进行一个全局注册

以前注册组件 有 全局注册 和 局部注册

复制

 粘贴

 可以看到这些按钮

 

 

这里放入import 'element-plus/dist/index.css'

dist代表打包之后的

 可以看到按钮效果变了

 

 

 

 

 

我们在试一试，复制这个

 粘贴

可以看到效果

 这就是全局引入

 全局引入时注意这两个文件

　　tsconfig.json 是 TypeScript 项目中重要的配置文件，用于定义编译器行为和项目结构 ，比如指定目标 ECMAScript 版本、模块系统、严格类型检查等编译选项，还能设置哪些文件和目录参与编译。当使用tsc命令编译 TypeScript 代码且不指定配置文件位置时，tsc会在当前目录及上级目录搜索该文件。

　　而tsconfig.config.json不是 TypeScript 默认或常见的配置文件名。在 TypeScript 项目里没有特殊约定和关联指向它，若出现该文件，可能是开发者自定义命名 ，用于区别于标准的tsconfig.json，来存放特定的配置（比如某个功能模块相关的配置） 。

　　简单来说，tsconfig.json有明确的用途和约定，tsconfig.config.json不是标准配置文件名，具体作用取决于开发者赋予它的功能。

 

在全局配置的时候这里也需要注意这里

 具体写这里，会让他的属性出来，会有更加友好的提示

 

　　

 

 

 

 

 

 

 

 按需导入，以前：

 

现在，出现了插件npm install -D unplugin-vue-components unplugin-auto-import

 安装插件

 然后在Vite中配置或者Webpack（就是vue.config.js的配置）中配置

 我们现在用的Vite

所以复制这个

 放到这里

 

复制这个

 放到这里

AutoImport({ resolvers: [ElementPlusResolver()], }),让这些组件可以做一个自动导入的功能

Components({ resolvers: [ElementPlusResolver()], }), 这个解决我们对应的Component组件问题

 

可以看看效果

 可以看到这里会多两个文件，这个是自动生成的，帮助我们增加了声明文件

 帮你声明好了，是自动生成的

 在这个文件中加入

 

在 TypeScript 配置文件（tsconfig.json）中，这些蓝色单词含义如下：

• extends：表示继承其他配置文件的设置，可复用已有配置。
• include：指定要包含在编译中的文件或目录，列出的文件或目录会参与 TypeScript 编译。
• exclude：指定要从编译中排除的文件或目录，这些文件或目录不会参与编译 。
• compilerOptions：用于配置 TypeScript 编译器的各种选项，如目标 JavaScript 版本、模块系统等。
• tsBuildInfoFile：用来指定存储编译信息文件的路径，有助于在增量编译时提高编译速度 。

 

 

复制这个

 

粘贴到这里

 

可以看到

 注意这种导入方法中，这些内容不是把他当作一个组件直接注册的，这个组件时在JS代码的逻辑中用的，不会帮你识别，所以没有自动导入，所以只有两种办法1、手动导入的2、一些别的办法后面具体说

 手动导入