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

应和悦
2023-12-01

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左右,说明全局引入会使项目文件过大,延长了请求时间,影响用户体验!

 类似资料: