Vue项目集成ElementsUI 组件

电玩女神 2023-10-10 10:43 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>

界面效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200102011059412.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70