element-ui全局导入与按需引入

全局引入

npm i element-ui -S

安装好depencencies里面可以看到安装的element-ui版本

然后

在 main.js 中写入以下内容：

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)
});

重点是两个import与一个use

这样就可以全局引入

按需引入

npm install babel-plugin-component -D

接着在babel.config.js文件内修改，最终文档：

module.exports = {

presets: [

'@vue/cli-plugin-babel/preset',

["@babel/preset-env", { "modules": false }]

],

"plugins": [

[

"component",

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

}

]

]

}

接着main.js按需引入

import {Icon,Button} from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Icon);

Vue.use(Button);

具体import+use使用的元素

到此完成

区别

比如简单地使用后，全局引入npm run build打包得到了2.76mb的dist文件夹，按需引入只有900kb

dist文件夹的大小决定用户初次请求网页时加载的时间