Vue项目集成ElementsUI 组件解析

你猜 阅读:252 2021-03-31 16:52:42 评论:0

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> 

界面效果如下:

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们