如何在Vue2中引入ElementUI

如何在Vue2中引入ElementUI

①安装ElementUI
在vscode中:npm i element-ui
②在main.js中

import Vue from 'vue'
import App from './App.vue'
// 引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI的所有样式
import 'element-ui/lib/theme-chalk/index.css';

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用ElementUI
Vue.use(ElementUI)

new Vue({
    
    
  render: h => h(App),
}).$mount('#app')

在app.vue中

<template>
  <div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>

export default {
    
    
  name: "App",
};
</script>

<style>
</style>

效果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44747173/article/details/125982981
今日推荐