Vue项目集成ElementsUI 组件
你猜
阅读:706
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.作者投稿可能会经我们编辑修改或补充。