vue3.0整合elementUi
一:安装依赖cnpm install element-ui -S二:vue项目在main.js中引入elementuiimport Vue from 'vue'import App from './App.vue'//组件import HelloWorld from './components/HelloWorld.vue'import WangEditor from '....
·
一:安装依赖
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>
四:演示效果
更多推荐
已为社区贡献2条内容
所有评论(0)