1.创建VUE项目,vue ui。
2.创建成功运行项目
3.如何创建一个组件,并将组件进行引入。
在src文件夹下components创建组件。案例:
在components文件夹下创建Header.vue文件。
<template>
<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
<div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
<div style="flex: 1"></div>
<div style="width: 100px">下拉框</div>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
</style>
再App.vue中引入组件。
<template>
<div id="nav">
<Header />
</div>
<router-view/>
</template>
<style>
</style>
<script>
import Header from "./components/Header";
export default {
name: "Layout",
components: {
Header
}
}
</script>
引入之后看浏览器的页面展示。
注意谷歌浏览器缓存严重,尽量用eg.
一,项目搭建
1.安装插件
npm install element-plus --save
进行引入在main.js
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
app.use(ElementPlus)
安装完插件将会提示,直接用yarn安装。 将element ui plus引入到页面,测试是否被引入。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
引入侧边栏和导航栏,右侧下拉菜单。
<template>
<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
<div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
<div style="flex: 1"></div>
<div style="width: 100px">
<el-dropdown>
<span class="el-dropdown-link">
张三<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
</style>
引入左侧导航栏 以组件的方式进行引入。
<template>
<div>
<el-menu
default-active="2"
class="el-menu-vertical-demo">
<el-submenu index="1">
<template #title>
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template #title>分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template #title>选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<template #title>导航二</template>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<template #title>导航三</template>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<template #title>导航四</template>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
</style>
将组件进行引入
<template>
<div id="nav">
<Header />
<div style="display: flex">
<Aside/>
</div>
</div>
<router-view/>
</template>
<style>
</style>
<script>
import Header from "./components/Header";
import Aside from "./components/Aside";
export default {
name: "Layout",
components: {
Header,
Aside
}
}
</script>
二,前后台交互
1.前后台交互安装插件
npm i axios -S