Vue3+Element-ul学生管理系统(项目实战)

要发奋做一个可爱的人。不埋怨谁，不嘲笑谁，也不羡慕谁，阳光下灿烂，风雨中奔跑，做自我的梦，走自我的路！

看本项目的前提自己学过Vue2+Vue3+Elementui组件库

项目的PTT的介绍:

 具体的环境配置操作:

core-js 它是JavaScript标准库的 polyfill（垫片/补丁）, 新功能的es'api'转换为大部分现代浏览器都可以支持 运行的一个'api' 补丁包集合。 2.因为官方库对他介绍的形容 2.1.它支持最新的 ECMAScript 标准 2.2.它支持ECMAScript 标准库提案 2.3.它支持一些 WHATWG / W3C 标准（跨平台或者 ECMAScript 相关） 2.4.它最大限度的模块化：你能仅仅加载你想要使用的功能 2.5.它能够不污染全局命名空间 2.6.它和babel紧密集成：这能够优化core-js的导入 2.7.它是最普遍、最流行 的给 JavaScript 标准库打补丁的方式。

 项目结构的信息:

 文件的结构介绍解析:

 项目实现的效果图如下所示:

 项目的心得:

1. • 自己回去思考项目开发使用的技术有哪些
2. • 比如这个项目采用的是Vue2+ element-ui“: 组件库
3. • 自己所学习的知识手写出一个项目是对于自己所学的Vue框架的知识点稳固
4. • 自己所学习的知识点将自己所学的内容知识点进行融汇柜台
5. • 写项目让自己了解具体的业务开发的流程,了解自己如何去配置一个综合项目的环境配置
6. • 在写项目的过程对自己的逻辑思维进行提升
7. • 在写项目的过程中会有以下的疑问.这个项目采用的技术是什么?为什么要这样写？如何去写好这个项目？
8. •在写项目的过程中可能会出现bug但是自己也要去解决这个bug.因为在写项目的过程中会出现很多的问题.关键在于对自己如何去解决这个问题。
9. •项目会认自己在开发中使用很多的第三方库的组件,而这些组件也是自己学习的知识的一部分。

项目展示的部分代码:

main.js文件

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import router from './router'
import VCharts from 'v-charts'
Vue.config.productionTip = false
Vue.use(VCharts)
new Vue({router,render: h => h(App)
}).$mount('#app')

 router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../components/HomeView.vue'
// 信息管理的模块
import StudentManage from "@/views/student/StudentManage";
// 增加学生管理的信息模块
import AddStudent from "@/views/student/StudentAdd";
// 查询所有的的学生信息
import StudentSee from "@/views/student/StudentSee";
// 上面为第一部分
//  成绩管理的模块
// 软件工程
import SoftwareEngineering from "@/views/achievement/SoftwareEngineering";
// 计算机
import CompilationPrinciple from "@/views/achievement/CompilationPrinciple";
// 编译原理
import ComputerNetwork from "@/views/achievement/ComputerNetwork";
// 软件管理
import DataStructure from "@/views/achievement/DataStructure";
// 高等数据
import HighNumber from "@/views/achievement/HighNumber";// 上面的第二部分 成绩管理模块
// student/dashboard
import DashboardView from "@/views/student/DashboardView";import BodyView from "@/views/BodyView";// 课程管理
import CurriculumView from "@/views/curriculum/CurriculumView";
//其他的设置
import SettingView from "@/views/SettingView";Vue.use(VueRouter)const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}Vue.use(VueRouter)
const routes = [{// 父盒子的组件path: '/father',name: 'father',component: BodyView,children:[{path: '/student/manage',name: 'StudentManage',component: StudentManage},{path: '/student/add',name: 'AddStudent',component: AddStudent},{path: '/student/see',name: 'StudentSee',component: StudentSee},{path: '/achievement/software_engineering',name: 'SoftwareEngineering',component: SoftwareEngineering},{path: '/achievement/compilation_principle',name: 'CompilationPrinciple',component:CompilationPrinciple},{path: '/achievement/computer_network',name: 'ComputerNetwork',component: ComputerNetwork},{path: '/achievement/data_structure',name: 'DataStructure',component: DataStructure},{path: '/achievement/high_number',name: 'HighNumber',component: HighNumber},{path: '/student/dashboard',name: 'Dashboard',component: DashboardView},{path: '/curriculum',name: 'AddCurriculum',component: CurriculumView},{path: '/setting',name: 'settingView',component: SettingView}]},{path: '/',name: 'home',component: HomeView}]const router = new VueRouter({routes
})export default router

 App.vue文件

BodyView.vue文件

HomeView.vue文件

LoginView.vue文件

NavMenu.vue文件

// 侧边栏

HeaderView.vue文件:

FooterView.vue文件:

achievement模块:

CompilationPrinciple.vue

ComputerNetwork.vue

DataStructure.vue

HighNumber.vue

SoftwareEngineering.vue

curriculum模块:

AddCurriculum.vue

CurriculumView.vue

DelCurriculum.vue

UpdateCurriculum.vue

student模块:

DashboardView.vue

DescriptionsView.vue

StudentAdd.vue

StudentManage.vue

StudentSee.vue

3万多字的打磨让你了解如何创建一个基本的Vue3+Vue2的项目