vuejs3.0 从入门到精通——Element Plus 组件库

Element Plus 组件库

一、Element Plus

  基于 Vue 3，面向设计师和开发者的组件库。

二、完整导入

https://element-plus.org/zh-CN/guide/quickstart.html#完整引入

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

?

1 2 3 4 5 6 7 8 9 10

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

 三、Volar 支持

https://element-plus.org/zh-CN/guide/quickstart.html#Volar-支持

  如果您使用 Volar，请在tsconfig.json中通过compilerOptions.type指定全局组件类型。

?

1 2 3 4 5 6 7

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

四、按需导入

https://element-plus.org/zh-CN/guide/quickstart.html#按需导入

  您需要使用额外的插件来导入要使用的组件。

4.1、自动导入推荐

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

?

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

  然后把下列代码插入到你的Vite或Webpack的配置文件中

4.2、Vite

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 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()],     }),   ], })

4.3、Webpack

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 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()],     }),   ], }