关于element:从实际项目深入理解ElementPlus的导入方式

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/unpl…
// 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>