从实际项目深入理解ElementPlus的导入方式

简介: ElementPlus官网中介绍了三种导入方式,分别是完整导入、按需自动导入、(按需)手动导入。但在实际项目中还会有全局导入部分组件以及全局导入和按需导入组合的方式。本文通过github上几个高star数的项目来展示几种导入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,直接使用即可:


复制代码
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/>  




相关文章
|
JavaScript 前端开发
Vue3 + Vite批量导入模块 / 资源
Vue3 + Vite批量导入模块 / 资源
720 0
|
2月前
|
前端开发 JavaScript
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
111 1
怎么在vite项目中全局导入一个scss文件
|
3月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
1006 0
|
5月前
|
前端开发
如何在前端项目中单独引入 ElementUI 图标以及使用
这篇文章介绍了如何在前端项目中单独引入Element UI的图标文件以及如何使用这些图标。
464 0
如何在前端项目中单独引入 ElementUI 图标以及使用
|
8月前
|
JavaScript 前端开发
若依 自定义实现导入功能
若依 自定义实现导入功能
224 1
|
8月前
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
57 0
|
8月前
|
JavaScript
用命令窗口的方式创建Vue项目
用命令窗口的方式创建Vue项目
49 0
|
JavaScript
vue3新建的项目如何配置
vue3新建的项目如何配置
60 0
|
JavaScript
Vue单文件加载流程
Vue单文件加载流程
|
前端开发
React组件导入的两种方式(动态导入组件的实现)
React组件导入的两种方式(动态导入组件的实现)
404 0