一、使用vue-cli新建vue项目
1.main.js // 是项目入口文件,里面注册ElementUI插件,并指定App.vue为入口vue文件
2.App.vue // 指定布局,Header和Aside
总体结构 //这个结构决定了你打开主页后,看到的各个路由什么及其菜单
<template>
<div id="nav">
<!--外层容器-->
<el-container>
<!--顶栏容器-->
<el-header>
<Header/>
</el-header>
<!--侧边栏容器-->
<el-container>
<el-aside width="200px">
<Aside/>
</el-aside>
<!--这个是存放路由的地了!!! 通过切换路由实现页面切换-->
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
注意2部分: 用到的各种容器 + 自定义路由!!!
Header // 登录登出按钮 网站图标啥的
Aside // 这个主要就是路由了!!!
3.router/index.js // 指定各个路由的配置，哪个路由对应哪个views/XxxView.vue界面
4.一个具体的页面代码组织 HomeView.vue, 它是在路由中注册的
<template>部分
<template>
<div class="home" style="padding: 50px">
这一部分是除了从ElementUI粘贴通用的一些组件外，自己肯定还有一些自定义的部分，搞个div即可！！！
里面可以加一下按钮啥的加一些自定义的功能。
<div style="text-align: left; padding-right: 10px; margin-bottom: 10px">
<el-input
v-model="search"
placeholder="请输入搜索关键字"
style="width: 20%; margin-right: 10px"
clearable
></el-input>
<el-button type="primary" @click="load">搜索</el-button>
<el-button type="success" @click="add">添加</el-button>
</div>
这一部分就是从ElementUI粘贴出来的了
<el-table
:data="tableData"
stripe
border
style="width: 100%; margin-bottom: 10px;"
>
<el-table-column prop="id" label="编号" width="180" sortable/>
<el-table-column prop="studentname" label="学生姓名" width="180"/>
<el-table-column prop="gender" label="性别"/>
<el-table-column prop="age" label="年龄"/>
<el-table-column prop="address" label="家庭地址"/>
<el-table-column fixed="right" label="操作" width="150">
<template #default="scope">
<el-button type="primary" size="small" @click="handleEdit(scope.row)"
>编辑
</el-button
>
<el-popconfirm
title="你确定要删除吗？"
@confirm="handleDelete(scope.row.id)"
>
<template #reference>
<el-button type="danger" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
v-model:currentPage="currentPage"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 20]"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<!--操作时，弹框-->
<el-dialog v-model="dialogVisible" title="学生信息" width="30%">
<el-form :model="form" label-width="120px">
<el-form-item label="学生姓名">
<el-input v-model="form.studentname"/>
</el-form-item>
<el-form-item label="性别">
<el-radio v-model="form.gender" label="男" size="large">男</el-radio>
<el-radio v-model="form.gender" label="女" size="large">女</el-radio>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age"/>
</el-form-item>
<el-form-item label="家庭住址">
<el-input type="textarea" v-model="form.address"/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
也就是用到的一些组件:
Table 表格 | Element PlusMessageBox 消息弹框 | Element Plus
<script>部分
export default {
name: "HomeView",
components: {}, // 这个应该是引用其它的组件，毕竟vue是基于组件可以共用
setup(){ // 最外层
// 相当于vue2中的data
const state = reactive({
tableData: [],
currentPage: 1,
pageSize: 5,
total: 0,
search: "",
form: {},
dialogVisible: false,
})
// 页面加载后调用, 生命周期类的
onMounted(()=>{
// 可以页面初始化好后调用一个方法发送http请求从服务器获取数据
xxx1();
})
const xxx1 = ()=>{ ... } // 一个个功能方法
const xxx2 = ()=>{ ... } // 一个个功能方法
return {
...toRefs(state),
// 在页面中可以引用到的一些方法
xxx1,
xxx2,
xxx3,
}
}
5.其它复用部分
components // 主要是各个页面复用的一些,毕竟vue玩的就是组件的复用!!!
axios 发出请求。
跨域: 为了代码可读性，我们当然还是使用后端跨域配置了，前端还得修改路由加上api，有点麻烦。
如何实现页面的切换呢?(静态和动态路由???)
登录验证???
权限管理???