配置:在main.js导入ElementUI
import ElementUI from 'element-ui'
Vue.use(ElementUI)
推荐一个大佬的gitee:花裤衩,里面有半成品框架
半成品框架(可克隆下来直接使用):
https://gitee.com/panjiachen/vue-element-admin.git
组件的使用:
1. 创建组件:header.vue
一般放在views文件夹里,可以放component文件夹,或者自己创建
<template>
<div></div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
2.配置
router文件夹的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)
const routes = [
//添加{}里的内容
{
path: '/head',
name: 'Head',
meta: {
scrollToTop: true
},
component: () => import('../views/head.vue')
},
]
const router = new VueRouter({
// mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
3.使用组件:
在script标签里,在export default语句的前面添加import导入
<template>
<div></div>
</template>
<script>
//import 组件名字 from "组件地址";
import head from "./components/head.vue";
export default {
//使用
components: { head },
}
</script>
<style scoped>
</style>