1、npm 安装:
npm i element-ui --save
2、按需引入:
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component --save-dev
3、根目录下新建.babelrc
文件
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
4、若只想引入部分组件,例如Message,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';
import { Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue';
Vue.prototype.$message = Message; //挂载到vue原型上了,后面用this.$message.info('警告'),也不用在vue文件import导入{Message}了
/* 或写为
* 不同的组件引用方法可能不同,具体可参考官网
* Vue.use(Message )
*/
new Vue({
el: '#app',
render: h => h(App)
});
5、在需要使用message的vue文件中:
<script>
import { Message } from 'element-ui'
export default{
Message.info('添加成功')
}
</script>
type:success/warning/info/error ,默认值:info