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