Vue项目集成ElementsUI 组件

Vue 项目安装ElementUI

开启cmd 窗口指令，切换之Vue 项目的工作空间，执行如下代码：

cnpm i element-ui -S

Vue 项目引入ElementUI 组件

编辑src/mian.js 文件，添加elementUI 组件依赖：

// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
import Vue from 'vue' 
import App from './App' 
import router from './router' 
// 引入ElementUI 
import ElementUI from 'element-ui' 
import 'element-ui/lib/theme-chalk/index.css' 
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api 
var axios = require('axios') 
axios.defaults.baseURL = 'http://localhost:7080/api' 
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据 
Vue.prototype.$axios = axios 
 
Vue.config.productionTip = false 
// Vue 使用elementUI 组件 
Vue.use(ElementUI) 
/* eslint-disable no-new */ 
new Vue({ 
  el: '#app', 
  router, 
  components: { App }, 
  template: '<App/>' 
}) 

总结：Vue 项目依赖ElementUI 组件总体分为三步骤:

1、引入ElementUI 组件 = import ElementUI from 'element-ui'

2、引入ElementUI 组件样式 = import 'element-ui/lib/theme-chalk/index.css'

3、VUE 使用ElementUI 组件 = Vue.use(ElementUI)

修改src/App.vue 组件，引入elementui 组件中按钮:

<template> 
  <div id="app"> 
    <router-view/> 
    <el-button type="success">Vue 项目引入ElementUI 组件</el-button> 
  </div> 
</template> 
 
<script> 
 
export default { 
  name: 'App' 
} 
</script> 
 
<style> 
#app { 
  font-family: 'Avenir', Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-align: center; 
  color: #2c3e50; 
  margin-top: 60px; 
} 
</style> 

界面效果如下：