vue3.0引入element

-UI后，如何实现按需加载？

对于按需加载，我们可以通过 babel-plugin-component 插件来实现。具体操作如下：

1. 全局安装 babel-plugin-component 插件：

npm install babel-plugin-component -D

2. 在 babel.config.js 中添加插件配置：

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}

3. 在需要使用的组件中，按需引入即可：

import { Button, Select } from 'element-ui'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

4. 在 webpack 配置文件中添加按需加载配置：

const webpackConfig = {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'element-ui': 'element-ui/lib',
}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')],
options: {
plugins: ['transform-vue-jsx', 'transform-runtime']
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}

其中，alias 配置中的 'element-ui': 'element-ui/lib' 表示指定 element-ui 库在 webpack 中的路径。需要注意的是，这里必须要指定 lib 目录，否则会加载全部组件。

这样就实现了按需加载 element-ui 组件的功能。