Vue基础知识-Vue集成 Element UI全量引入与按需引入
一、方式一：全量引入 Element UI
全量引入即一次性加载 Element UI 所有组件和样式，优点是配置简单，适合快速开发；缺点是打包体积较大，生产环境可能存在冗余。
1. 安装 Element UI
全量引入只需安装 Element UI 核心依赖（运行时必需，用-S或默认不写参数）：
npm install element-ui -S
2. 配置全量引入（main.js）
在项目入口文件main.js中引入所有组件和样式，并全局注册：
import Vue from 'vue'
import App from './App.vue'// 1. 全量引入Element UI组件和样式
import ElementUI from 'element-ui' // 引入所有组件
import 'element-ui/lib/theme-chalk/index.css' // 引入所有样式// 2. 全局注册Element UI（注册后所有组件可直接在模板使用）
Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
二、方式二：按需引入 Element UI（生产环境首选）
按需引入仅加载项目中用到的组件和对应样式，能显著减小打包体积，是生产环境的最佳实践。但需额外配置 Babel 插件。
1. 安装依赖
需安装两个依赖：
element-ui：核心组件库（运行时必需，-S）；babel-plugin-component：按需引入插件（仅开发时用，-D）；
# 安装核心组件库（运行时必需）
npm install element-ui -S
# 安装按需引入插件（开发时用）
npm install babel-plugin-component -D
2. 配置 Babel（babel.config.js）
在项目根目录的babel.config.js中添加插件配置，让 Babel 自动处理组件和样式的按需加载：
module.exports = {presets: ['@vue/cli-plugin-babel/preset' // Vue CLI默认预设，无需修改],plugins: [['component', // 对应安装的babel-plugin-component插件{libraryName: 'element-ui', // 指定目标组件库为Element UIstyleLibraryName: 'theme-chalk' // 指定Element UI的样式主题（默认theme-chalk）}]]
}
3. 按需引入组件（main.js）
在main.js中仅引入项目用到的组件（本文示例用Button、DatePicker、Row），并全局注册：
import Vue from 'vue'
import App from './App.vue'// 1. 按需引入Element UI组件（仅引入用到的组件）
import { Button, DatePicker, Row } from 'element-ui'// 2. 全局注册组件（两种方式二选一，效果一致）
// 方式A：用Vue.component（显式指定组件名，Button.name即"el-button"）
Vue.component(Button.name, Button)
Vue.component(DatePicker.name, DatePicker)
Vue.component(Row.name, Row)// 方式B：用Vue.use（组件内部已封装install方法，自动注册）
// Vue.use(Button)
// Vue.use(DatePicker)
// Vue.use(Row)Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
三、组件代码（App.vue）
<template><div><el-row><el-button type="primary">按钮</el-button><el-button type="primary" plain>按钮</el-button><el-button type="primary" round>按钮</el-button><el-button type="primary" circle>按钮</el-button></el-row><el-date-pickerv-model="date"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"></el-date-picker></div>
</template><script>export default {name:'App',data(){return {date:""}},components:{}}
</script><style></style>
四、关键知识点解析
1. -D和-S的区别（依赖分类）
-S（--save，默认）：安装到dependencies（生产环境依赖），即项目运行时必须的依赖（如element-ui，用户使用时需要）；-D（--save-dev）：安装到devDependencies（开发环境依赖），即仅开发时用的工具（如babel-plugin-component，打包后无需包含）。
错误后果：若将babel-plugin-component用-S安装，会导致生产环境打包时包含无用的开发工具，增加体积。
2. Vue.use()和Vue.component()的区别
两种方法都能全局注册组件，但适用场景不同：
Vue.component(组件名, 组件对象)：直接注册 “单个组件”，需手动指定组件名（如Vue.component('el-button', Button)）；Vue.use(插件/组件)：用于安装 “带install方法的对象”（Element UI 组件内部已封装install方法，调用Vue.use时会自动注册组件）。
本文示例中：Button组件既可以用Vue.component(Button.name, Button)注册，也可以用Vue.use(Button)注册，效果完全一致。
五、总结
| 引入方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 全量引入 | 配置简单，无需额外插件 | 打包体积大，冗余代码多 | 快速开发、小型项目 |
| 按需引入 | 打包体积小，性能优 | 需配置 Babel 插件，步骤稍多 | 生产环境、中大型项目 |