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，直接使用即可：

<template>
  <div>
    <el-menu
             :collapse="state.isSidebarNavCollapse"
             text-color="#eee"
             active-text-color="#4dbcff"
             :default-active="state.currentMenu"
             class="theme-bg"
             id="menu"
             :unique-opened="true"
             >
      <MENU :menuList="state.sidebarMenu"></MENU>
    </el-menu>
  </div>
</template>
复制代码

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，既没有引入组件也没有引入样式：

<template>
  <div class="w-screen h-screen flex items-stretch overflow-hidden">
    <div class="flex-1 flex flex-col ">
      <div class="flex-1 overflow-hidden">
        <ElScrollbar>
          <div class="container mx-auto">
            <RouterView/>
          </div>
        </ElScrollbar>
      </div>
    </div>  
    <PlayList/>  
  </div>
</template>
<script setup lang="ts">
  import PlayList from "@/components/layout/playList/PlayList.vue";</script>
<style lang="scss">
</style>