npm i element-ui -S
package.json是项目的配置文件,其中dependencies和devDependencies属性表示项目依赖和开发环境的依赖;node_modules包含项目所需的依赖文件;“vue-cli-service serve”指的是通过webpack将项目的vue文件打包成静态资源,运行在本地的开发服务器上;cli创建的项目的入口文件在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)
});
安装 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左右,说明全局引入会使项目文件过大,延长了请求时间,影响用户体验!