element-ui结合脚手架使用之全部引入与按需引入

element-ui结合脚手架使用之全部引入

¶npm 安装element-ui到node_modules目录下

npm i element-ui -S

package.json是项目的配置文件，其中dependencies和devDependencies属性表示项目依赖和开发环境的依赖；node_modules包含项目所需的依赖文件；“vue-cli-service serve”指的是通过webpack将项目的vue文件打包成静态资源，运行在本地的开发服务器上；cli创建的项目的入口文件在main.js中

完整引入整个 ElementUI

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI); //全局注入

new Vue({
  el: '#app',
  render: h => h(App)
});

element-ui结合脚手架使用之按需引入

按需引入ElementUI组件

安装 babel-plugin-component 插件（当你要单独引入element-ui的一个或多个组件就需要借助babel来将单个的组件打包的时候拆分出去。如果没有使用babel,在打包的时候会将整个element-ui组件全部进行打包）

npm install babel-plugin-component -D

给 babel.config.js 文件添加上以下属性：（运行时会报错“Error: Cannot find module 'babel-preset-es2015'”，即找不到es2015依赖，需将“es2015”改成“@babel/preset-env”）

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

按需引入组件 

import Vue from 'vue';
import { Button, Select } from 'element-ui'; // 解构组件
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

执行npm run build 命令后，项目中出现了dist文件夹，即打包之后的静态文件，用于部署上线。

分别进行实现全局引入和按需引入的elementUI组件，发现dist文件大小分别是3MB和1MB左右，说明全局引入会使项目文件过大，延长了请求时间，影响用户体验！