08——vue企业级电商系统(ElementUI)

ElementUI

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