vue项目element ui的按需引入

基于vue/cli3.0+脚手架搭建Vue项目(06)

---

---

前言

---

一、element ui

目前供vue使用的主流ui框架

二、element ui的按需导入

1.安装element-ui依赖，安装 babel-plugin-component依赖

npm i element-ui -S

npm install babel-plugin-component -D

2.项目根目录babel.config.js添加代码

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.main.js文件引入所需部分组件

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

Vue.use(Button).use(Icon)

三、element ui的验证

<template>
  <el-button type="primary" icon="el-icon-search">搜索</el-button>
</template>

---

总结

晚风中闪过几帧从前啊，飞驰中旋转已不见了吗？–《这世界那么多人》