面试官：谈谈组件引入🙂

前言

之前面试的时候被被问到了按需引入的问题,我认真看了ElementPlus和vant4组件库的官方文档以便向面试官阐述清楚！！

ElementPlus

通过查看官方文档ElementPlus总共有完整引入、按需引入、手动导入三种。

完整引入

完整引入是最方便的,如果我们不在乎打包文件的大小的话可以直接完整引入。且看下边的代码！！

// 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')

可以看出我们在main.ts文件中

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

并且使用了app.use(ElementPlus) 我们来看看小demo吧！！

<template>  
<el-scrollbar height="400px">  
<p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>  
</el-scrollbar>  
</template>  
<script >  
</script>  
<style lang="scss" scoped>  
.scrollbar-demo-item {  
display: flex;  
align-items: center;  
justify-content: center;  
height: 50px;  
margin: 10px;  
text-align: center;  
border-radius: 4px;  
background: var(--el-color-primary-light-9);  
color: var(--el-color-primary);  
}  
.layout-container-demo .el-header {  
position: relative;  
background-color: var(--el-color-primary-light-7);  
color: var(--el-text-color-primary);  
}  
.layout-container-demo .el-aside {  
color: var(--el-text-color-primary);  
background: var(--el-color-primary-light-8);  
}  
.layout-container-demo .el-menu {  
border-right: none;  
}  
.layout-container-demo .el-main {  
padding: 0;  
}  
.layout-container-demo .toolbar {  
display: inline-flex;  
align-items: center;  
justify-content: center;  
height: 100%;  
right: 20px;  
}  
</style>

如图可见效果！！完引入特别方便！！

按需引入

我们可以使用额外的组件来导入要使用的组件！ 我们先安装安装unplugin-vue-components和 unplugin-auto-import这两款插件 然后把代码插入到配置文件当中webpack或者vite。我们以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()],
    }),
  ],
})

import { createApp } from 'vue'  
import App from './App.vue'  
// np  
const app = createApp(App)  
// app.use(ElementPlus)  
app.mount('#app')

我们看看效果吧！！

按需引入实在是太方便了！!

手动导入

手动导入有开箱即用的味道,我们需要啥组件就导入该组件就行。个人而言不是很方便没用前两种方法实在！

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

vant4

通过看van4的官方文档看到有常规引入和按需引入两种！

常规引入

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

<van-button block native-type="submit" round type="primary">  
登入  
</van-button>

按需引入

跟ElementPlus的大差不差 我们可以先 npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D 然后在vite.config文件中配置:

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

<template>
  <van-button type="primary" />
</template>

完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件, @vant/auto-import-resolver 会自动引入对应的组件样式。unplugin-auto-import 会自动导入对应的 Vant API 以及样式。好啦今天的分享就到这里了！！