vue3.0整合elementUi

一：安装依赖

cnpm install element-ui -S

二：vue项目在main.js中引入elementui

import Vue from 'vue'
import App from './App.vue'
//组件
import HelloWorld from './components/HelloWorld.vue'
import WangEditor from './components/WangEditor.vue'
import Blog       from './components/blog/Blog.vue'
//elementui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//axios请求
import axios from 'axios'
window.axios = axios
//引入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//配置路由
const routes = [
    {path: '/',component: HelloWorld},
    {path: '/editor',component: WangEditor},
    {path: '/blog',component: Blog},
    {path: '*',redirect: '/'} //防输错或者没找到页面路由错误，跳转到首页
]
const router = new VueRouter ({
    routes,
    mode: 'history'
})

Vue.config.productionTip = false

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

三：html中直接使用即可，我这里是使用的elementui的card组件

<template>
  <div class="blog">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
  </div>
</template>

<script>
export default {
  name: 'blog',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
    height:20px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 480px;
  }
</style>

四：演示效果

猜你喜欢