08vue3实战-----在vue3项目中集成Element-Plus组件库

1.常见的UI库

• ‌Ant Design
  基于React的UI组件库
• Ant Design Vue
  基于Vue的UI组件库
• ‌‌Material UI‌
  基于React的UI组件库
• ‌‌‌Element UI/‌Element Plus
  基于Vue的UI组件库,一般情况下Element UI是基于Vue2的,Element Plus是基于Vue3的
• NextUI‌
  基于React的UI组件库
• ‌Naive UI
  适合Vue3.0/TypeScript的组件库
• ‌‌PrimeVue
  基于Vue3的UI组件库
• ‌‌‌Vant‌
  多平台框架
• Ant Design Mobile
  基于H5
• ‌‌‌WeUI
  基于小程序

2.安装Element Plus

element plus官网:https://element-plus-docs.bklab.cn/
命令行安装:

npm install element-plus --save

3.完整引入Element Plus

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

 // main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'//一定要引入css
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

完整引入是支持Volar的,如果使用了Volar,请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

这样子当鼠标悬浮在文件中的组件上，就会有组件相关的类型提示。

4.手动按需引入Element Plus

App.vue:

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

vite.config.ts:

import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

5.自动按需引入Element Plus

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。

 npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到Vite或Webpack 的配置文件中:
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()],
    }),
  ],
})

Webpack:

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

配置好之后就不用按需手动按需引入直接可以在vue文件中使用组件。然后npm run dev运行项目。项目没啥问题。仔细观察会在项目中生成两个文件(这两个文件不要去手动修改):

auto-imports.d.ts:

// Generated by 'unplugin-auto-import'
export {}
declare global {}

components.d.ts:

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    ElButton: typeof import('element-plus/es')['ElButton']
    ElLink: typeof import('element-plus/es')['ElLink']
    ElRow: typeof import('element-plus/es')['ElRow']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

如果后续在项目中用到了其它组件,重新运行项目之后components.d.ts中会自动追加这些组件类型。
为了让这两个d.ts声明文件生效,需要在tsconfig.json中的include属性中追加这两个文件的配置。

 {
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "src/**/*",
    "src/**/*.vue",
    "env.d.ts",
    "auto-imports.d.ts",
    "components.d.ts"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
  },

  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

这样子在vue文件中鼠标悬浮在组件附近，就会出现组件的类型提示及相关属性提示。