1、安装
版本:2.15.7
npm i element-ui -S
2、添加配置 element-ui原文档:将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
我的:在配置信息babel.config.js,添加
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset', // vue创建生产的
['@babel/preset-env', { 'modules': false }]
],
plugins: [
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}
3、引入控件
两种情况:(1)在main.js里添加
(2)文件导入(我用的),要创建文件
(1)mian.js添加
// 按需引入element-ui
import 'element-ui/lib/theme-chalk/index.css' // element样式
import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }
Vue.use(Button)
(2)文件导入添加
1)先创建文件:(tools/js/element.js)
// 导入自己需要的组件
import {
Button
} from 'element-ui'
const element = {
install: (Vue) => {
Vue.use(Button)
}
}
export default element
2)在main.js导入
// 按需引入element-ui
import 'element-ui/lib/theme-chalk/index.css' // element样式
import element from './tools/js/element' // 组件
Vue.use(element, { size: 'small', zIndex: 3000 }) // 组件默认大小和层次级