该节主要内容:布置vue页面样式,设置路由,写一个上传下载功能
前端页面和路由
整一个好看的vue页面
1.创建好相关文件夹和文件
components下创建一个api文件夹,里面创建hw.js
components下创建一个vue文件夹,里面创建downloadFile.vue和uploadFile.vue
2.访问Ant Design Vue官网选取页面样式,并将样式应用到HelloWorld.vue页面
我选的最后一种基本布局
前端引用该框架代码HelloWorld.vue
给位尽量自己引用试试,不要上来就复制我的代码,自己引用成功后,想怎么布局就怎么布局
<template>
<div>
<div id="components-layout-demo-basic">
<a-layout>
<a-layout-sider>
<div>
<a-menu :default-selected-keys="['1']" :default-open-keys="['sub1']" mode="inline" >
<a-menu-item key="1">
<a-icon type="pie-chart" />
<span>
</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="desktop" />
<span>
</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="inbox" />
<span>Option 3</span>
</a-menu-item>
<a-sub-menu key="sub1">
<span slot="title" ><a-icon type="mail" /><span>Navigation One</span></span >
<a-menu-item key="5"> Option 5 </a-menu-item>
<a-menu-item key="6"> Option 6 </a-menu-item>
<a-menu-item key="7"> Option 7 </a-menu-item>
<a-menu-item key="8"> Option 8 </a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title" ><a-icon type="appstore" /><span>Navigation Two</span></span >
<a-menu-item key="9"> Option 9 </a-menu-item>
<a-menu-item key="10"> Option 10 </a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="11"> Option 11 </a-menu-item>
<a-menu-item key="12"> Option 12 </a-menu-item>
</a-sub-menu>
</a-sub-menu>
</a-menu>
</div>
</a-layout-sider>
<a-layout>
<a-layout-header style="height: 150px">
<a-page-header title="Title" sub-title="This is a subtitle">
<!-- @back="() => $router.go(-1)" -->
<template slot="tags">
<a-tag color="blue"> Running </a-tag>
</template>
<template slot="extra">
<a-button key="3"> 上传 </a-button>
<a-button key="2"> 下载 </a-button>
<a-button key="1" type="primary"> 奥里给 </a-button>
</template>
<a-row type="flex">
<a-statistic title="作者" value="L" />
<a-statistic title="指导老师" prefix="@" value="L" :style="{ margin: '0 32px', }" />
<a-statistic title="吃瓜群众" prefix="@" value="各位" />
</a-row>
</a-page-header>
</a-layout-header>
<a-layout-content style="height: 650px">
<div>
</div>
</a-layout-content>
<a-layout-footer style="height: 120px">
<div>
<h1>---热烈欢迎 吃瓜群众 前来参观指教---</h1>
</div>
</a-layout-footer>
</a-layout>
</a-layout>
</div>
<upload-file ref
文章评论