开发环境
- vue: 2.6.11
- elementui: 2.15.6
- vue/cli: 4.5.11
安装elementui
npm i element-ui -S
完整引入
根据官网指南编辑src/main.js即可。
...
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
...
Vue.use(ElementUI);
按需引入
安装 babel-plugin-component
这一步按照官网文档进行操作
npm install babel-plugin-component -D
修改babel.config.js
注意:在新版的vue/cli中,生成的脚手架项目中不再包括.babelrc,而是改成了babel.config.js
默认生成的babel.config.js文件是这样的:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
修改后是这样的:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
// 官方文档中使用的是["es2015", { "modules": false }],要替换
['@babel/preset-env', { 'modules': false }]
],
//plugins照抄文档即可
plugins: [
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}
引入elementui组件
在src目录下创建文件 elementui/index.js,并选择需要的组件
注意这个install关键字,其实就是定义了一个插件
import { Button, Message} from 'element-ui'
export default {
install(Vue) {
Vue.use(Button)
Vue.use(Message)
//可使用this.$message
Vue.prototype.$message = Message
}
}
在main.js中引入
# 这里不需要再引入elementui的样式了
import elementui from './elementui'
Vue.use(elementui)
引入之后,就可使用相关组件了。