一、项目简介和需求概述
1、课程目标
1.能够基于Vue3创建项目
2.能够基本Vue3相关的技术栈进行项目开发
3.能够使用Vue的第三方组件进行项目开发
4.能够理解前后端分离的开发模式
2、项目概述
本次课程带领大家使用Vue3结合ElementPlus,ECharts工具实现后台管理系统页面,包含登录功能,主页布局和导航条功能,客户和保单管理功能,分页展示功能,表单添加功能,报表生成功能等。使用axios调用远程接口,使用Apifox模拟远程接口,使用vuex存储登录信息。
3、使用的主要技术栈和工具
Vue3
TypeScript
ElementPlus
ECharts
Apifox
二、项目初始化
1、项目创建
使用vite或vue_cli创建项目
npm create vue@latest
或者
//npm install -g cnpm --registry=http://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm create vue@latest
2、配置Vue路由
import router from './route
const app = createApp(App);
app.use(router)
3、配置 axios 库
安装:
npm install --save vue-axios
或
npm install -g pnpm
pnpm install --save vue-axios
引入:
import axios from 'axios';
4、配置Element Plus
npm install -g pnpm
安装 Element Plus:
pnpm install element-plus --save
安装Element Plus图标
pnpm install @element-plus/icons-vue
在 main.js 中引入 Element Plus
import {
createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
在 main.js 中引入 Element Plus Icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
也可以在使用时再导入
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
在上述代码中,我们首先导入 Element Plus,并使用 createApp 方法创建 Vue 应用程序实例。然后使用 app.use 方法注册 Element Plus 插件,并使用 app.mount方法将应用程序挂载到 DOM 元素上。
在组件中使用 Element Plus 的组件,如下:
<template>
<el-button type="primary">按钮</el-button>
</template>
<el-icon><delete /></el-icon>
5、初始化 git 远程仓库
多人合作时需要上传项目到仓库
6、将本地项目托管到GitHub或Gitee中
三、Element Plus常用组件
1、组件库的常用组件(如 Button, Dropdown 等)介绍与实例
官网:https://element-plus.org/zh-CN/
我们在官网组件里可以看到各种已经定义好的组件
1、Button
使用 type
、plain
、round
和 circle
来定义按钮的样式。
<el-button type="primary">Primary</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="primary" :icon="Edit" circle />
使用 disabled
属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean
类型的值。
<el-button type="primary" disabled >Primary</el-button>
可以设置为链接按钮
<el-button type="primary" link>Primary</el-button>
可以设置为文字按钮
<el-button type="primary" text>Primary</el-button>
可以设置为图标按钮
<el-button type="primary" :icon="Search">Search</el-button>
可以使用size调整尺寸
<el-button type="primary" size=“small” >Primary</el-button>
可以自定义元素标签。例如,按钮,div,路由链接,nuxt链接
<el-button type="primary" tag="div" >Primary</el-button>
2、DropDown
下来菜单
<el-dropdown> 组件是父组件,它包含了一个具名插槽 <template v-slot:dropdown>,用于自定义下拉菜单的内容。
<el-dropdown-menu> 组件是子组件,它是父组件 <el-dropdown> 中的一个子组件,并被放置在具名插槽 <template v-slot:dropdown> 的位置。它用于渲染下拉菜单选项列表。
代码中的 #dropdown 也可以写成 v-slot:dropdown
<template>
<div class="flex flex-wrap items-center">
<el-dropdown split-button type="primary" @click="handleClick">
Dropdown List
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
const handleClick = () => {
// eslint-disable-next-line no-alert
alert('button click')
}
</script>
3、Container布局容器
用于布局的容器组件,方便快速搭建页面的基本结构
<el-container>:外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列, 否则会水平左右排列。
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。
<template>
<div class="common-layout">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<style>
/* 重新设置#app布局为左对齐 默认是网格布局 */
#app
{
height: 100%;
width: 100%;
display: flex !important;
align-items: flex-start !important; /* 将项目在交叉轴上靠上对齐 */
justify-content: flex-start !important; /* 将项目在主轴上靠左对齐 */
margin: 0px !important;
padding: 0px!important;
max-width: none !important;
}
.common-layout {
height: 100%;
width: 100%;
min-height: 1000px;
}
</style>
2、导航菜单
Menu 菜单
导航菜单默认为垂直模式,通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外,在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
1、顶部导航
注意这里要设置:
mode="horizontal" 表示水平排列
默认是垂直,也就是mode="vertical"
#title 插入子菜单
<template>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
@select="handleSelect"
>
<el-menu-item index="1">Processing Center</el-menu-item>
<el-sub-menu index="2">
<template #title>Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-sub-menu index="2-4">
<template #title>item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="3" disabled>Info</el-menu-item>
<el-menu-item index="4">Orders</el-menu-item>
</el-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>
2、左侧导航
<template>
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
<el-menu-item index="1-3">item three</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator two</span>
</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
3、Element Plus 的布局组件 (Layout, Row, Col)
组件默认使用 Flex 布局,不需要手动设置 type="flex"
。
样例中用到了sass样式,需要安装一下
npm install -D sass
1、基础布局
通过 row
和 col
组件,并通过 col 组件的 span
属性我们就可以自由地组合布局。
<template>
<el-row>
<el-col :span="24"><div style="background-color: red; height: 50px;" ></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div style="background-color: pink; height: 50px;" ></div></el-col>
<el-col :span="12"><div style="background-color: greenyellow; height: 50px;" ></div></el-col>
</el-row>
</template>
<style>
#app
{
height: 100%;
width: 100%;
display: block;
margin: 0px !important;
padding: 0px!important;
max-width: none !important;
}
</style>
2、分栏间隔
支持列间距。
行提供 gutter
属性来指定列之间的间距,其默认值为0。
<template>
<el-row :gutter="20">
<el-col :span="6"><div style="background-color: red; height: 50px;"></div></el-col>
<el-col :span="6"><div style="background-color: pink; height: 50px;"></div></el-col>
<el-col :span="6"><div style="background-color: yellow; height: 50px;"></div></el-col>
<el-col :span="6"><div style="background-color: green; height: 50px;"></div></el-col>
</el-row>
</template>
<style>
#app
{
height: 100%;
width: 100%;
display: block;
margin: 0px !important;
padding: 0px!important;
max-width: none !important;
}
</style>
3、混合布局
<template>
<el-row :gutter="20">
<el-col :span="6"><div style="background-color: red; height: 50px;"></div></el-col>
<el-col :span="6"><div style="background-color: pink; height: 50px;"></div></el-col>
<el-col :span="6"><div style="background-color: yellow; height: 50px;"></div></el-col>
<el-col :span="6"><div style="background-color: green; height: 50px;"></div></el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="8"><div style="background-color:burlywood; height: 50px;"></div></el-col>
<el-col :span="8"><div style="background-color: pink; height: 50px;"></div></el-col>
<el-col :span="8"><div style="background-color: red; height: 50px;"></div></el-col>
</el-row>
</template>
<style>
#app
{
height: 100%;
width: 100%;
display: block;
margin: 0px !important;
padding: 0px!important;
max-width: none !important;
}
.el-row {
margin-top: 50px;
}
</style>
这里的类别 el-row 可以通过开发者工具在代码中查看到
4、列偏移
<template>
<el-row :gutter="30">
<el-col :span="8"><div style="background-color:burlywood; height: 50px;"></div></el-col>
<el-col :span="8"><div style="background-color: pink; height: 50px;"></div></el-col>
<el-col :span="8"><div style="background-color: red; height: 50px;"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6" :offset="6"><div style="background-color:burlywood; height: 50px;"></div></el-col>
<el-col :span="6" :offset="6"><div style="background-color: pink; height: 50px;"></div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12" :offset="6"><div style="background-color: red; height: 50px;"></div></el-col>
</el-row>
</template>
<style>
#app
{
height: 100%;
width: 100%;
display: block;
margin: 0px !important;
padding: 0px!important;
max-width: none !important;
}
.el-row {
margin-top: 50px;
}
</style>
5、对齐方式
start:子元素左对齐。
center:子元素在水平方向上居中对齐。
end:子元素右对齐。
space-between:子元素沿水平方向均匀分布,在第一个子元素之前和最后一个子元素之后没有空间。
space-around:子元素沿水平方向均匀分布,每个子元素周围有相等的空间。
space-evenly:子元素沿水平方向均匀分布,包括第一个子元素之前和最后一个子元素之后的空间。
<template>
<el-row :gutter="30" justify="center">
<el-col :span="8"><div style="background-color:burlywood; height: 50px;"></div></el-col>
<el-col :span="8"><div style="background-color: pink; height: 50px;"></div></el-col>
<el-col :span="8"><div style="background-color: red; height: 50px;"></div></el-col>
</el-row>
<el-row :gutter="20" justify="end">
<el-col :span="6" ><div style="background-color:burlywood; height: 50px;"></div></el-col>
<el-col :span="6" ><div style="background-color: pink; height: 50px;"></div></el-col>
</el-row>
<el-row :gutter="20" justify="start">
<el-col :span="6" ><div style="background-color:burlywood; height: 50px;"></div></el-col>
<el-col :span="6"><div style="background-color: pink; height: 50px;"></div></el-col>
</el-row>
</template>
<style>
#app
{
height: 100%;
width: 100%;
display: block;
margin: 0px !important;
padding: 0px!important;
max-width: none !important;
}
.el-row {
margin-top: 50px;
}
</style>