vue 项目使用 element ui及按需引入

都是直接在elementui官网找到的

1. 全局安装插件

npm i element-ui -s

2.1 全局导入(main.js)

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // elementui的css需要单独导入

Vue.use(ElementUI);

2.2 按需导入

1). 安装插件

npm i babel-plugin-component -D

2). 在项目根目录创建 .babelrc 文件 并写入以下代码

{
  // 预设转义包的版本
  "presets": [["@babel/preset-env", { "modules": false }]], // 官网为 "presets": [["es2015", { "modules": false }]], 会报错
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3). 按需引入插件(main.js)

import 'element-ui/lib/theme-chalk/index.css';
import { Button, Select } from 'element-ui';

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

完成这些步骤之后要 重新跑项目才能生效

在项目里面用了elementui的什么组件就在main.js里面导入使用就可以实现按需引入了