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

按需引入"/>

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';Vueponent(Button.name, Button);
Vueponent(Select.name, Select);
/* 或写为* Vue.use(Button)* Vue.use(Select)*/

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

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