1.完整导入
本部分内容参考了element-plus官网和vue3.0-ts-admin项目。
正如官方文档所言，如果你对打包后的文件大小不是很在乎，那么使用完整的导入比较方便。
注意：完整导入后，使用的时候直接用
1.1 导入
main.ts文件
import { createApp } from 'vue'
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
复制代码
1.2 使用
如下代码中用到了el-menu，直接使用即可：
复制代码
2.按需自动导入
按需自动导入是推荐的导入方式。本节内容参考了vue3-music项目，您可以clone代码进行详细学习。
注意：如果采用自动按需导入的方式，则在使用组件的时候直接使用，不需要任何显示的导入语句。我们看一下按需导入的几个关键环节：
2.1 安装插件
m 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()],
}),],
})
复制代码
unplugin-vue-components/vite是负责组件自动导入的，你可以在不导入和注册组件的情况下在模板中使用想要用到的组件。
unplugin-vue-components内置了流行UI组件库的resolvers（例如element-plus的），我们可以看一下unplugin-vue-components中element-plus的resolver部分源码：
// https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-plus.ts
// resolveComponent方法中有一段代码：
return {
from: element-plus/lib/el-${partialName},
sideEffects: getSideEffectsLegacy(partialName, options),
}
// getSideEffectsLegacy：
function getSideEffects(dirName: string, options: ElementPlusResolverOptionsResolved): SideEffectsInfo | undefined {
const { importStyle, ssr } = options
const themeFolder = 'element-plus/theme-chalk'
const esComponentsFolder = 'element-plus/es/components'
if (importStyle === 'sass')
return ssr ? `${themeFolder}/src/${dirName}.scss` : `${esComponentsFolder}/${dirName}/style/index`else if (importStyle === true || importStyle === 'css')
return ssr ? `${themeFolder}/el-${dirName}.css` : `${esComponentsFolder}/${dirName}/style/css`}
复制代码
看到这些代码也大概知道其作用了：引入组件和样式。
unplugin-auto-import/vite是用于自动导入API的。例如下面这段代码，可以在不引入ref的情况下使用ref
const count = ref(0)
const doubled = computed(() => count.value * 2)
复制代码
2.3 使用
下面代码中使用了ElScrollbar，既没有引入组件也没有引入样式：
</ElScrollbar>
</div>
</div>
<PlayList/> 