字母哥毕业前端项目介绍方案(网页端)

字母哥带小白做毕设

已于 2024-02-26 17:59:11 修改

阅读量1.4k

点赞数 1

文章标签：课程设计

于 2023-10-06 01:44:42 首次发布

本文链接：https://blog.csdn.net/qq_41990222/article/details/133592747

版权

文章目录

框架
开题报告或者论文前端可能用的上的资料分享
项目文件作用
如何启动
如何找到请求的后端地址
如果想要学习可以在哔哩哔哩上看视频
核心必看
如何快速上手系统图形可视化
如何给菜单进行换图标
如何给系统换名称
如何给管理端菜单进行换颜色
如何进行管理端Logo图标的修改
如何不显示管理端Logo
如何安装前端环境
- 安装之前必看

框架

系统使用vue-element-admin集成方案

vue-element-admin官网
 element官网
 vue 官网

主要使用的技术都在上面的网址里面,也是目前比较流行的技术

开题报告或者论文前端可能用的上的资料分享

为啥使用vscode

Visual Code 是一款由微软开发的跨平台代码编辑器，支持多种编程语言，包括 C++, C#, JavaScript, Python 等等。它是一款免费且开源的软件，在开发者社区中广受欢迎。Visual Code 具有丰富的功能，包括智能代码补全、自动代码格式化、语法高亮、代码片段、调试等等。它还支持 Git 版本控制，可以与其他工具无缝集成。Visual Code 的界面简洁、易于使用，同时支持多种主题和插件扩展。通过安装不同的插件，你可以为 Visual Code 添加各种不同的功能，从而满足你的编程需求。总之，Visual Code 是一款功能强大、易于使用的跨平台代码编辑器，是开发者必备的工具之一。我们主要使用Vs Code编写前端代码。

使用技术的方案

基础框架 html+css+js
进阶框架 vue+element

为啥使用vue

Vue是一个流行的JavaScript框架，它可以帮助开发者更快速地构建交互式的Web界面。Vue的优点包括：

易于学习和使用
轻量级
响应式的数据绑定
组件化的开发
虚拟DOM

为啥使用element

Element UI是一个基于Vue.js的前端组件库，它为开发者提供了丰富的UI组件，可以大大简化前端开发的工作。它的优点包括：

提供了丰富的UI组件，可以满足开发者对于界面设计的需求。
完善的文档和示例，方便开发者学习和使用。
组件的封装程度较高，使用起来比较方便。
具有良好的兼容性，可以在多种浏览器中正常使用。
社区活跃，有较多的用户和贡献者，问题得到及时解决。

项目文件作用

├── build                      # 构建相关
├── node_modules               # 存放依赖的模块(一些外部提供的功能)
├── plop-templates             # 基本模板
├── public                     # 静态资源(可以忽略)
│   │── favicon.ico            # favicon图标(可以忽略)
│   └── index.html             # html模板(可以忽略)
├── src                        # 源代码
│   ├── assets                 # 主题 字体 图片 视频 等静态资源,
│   ├── components             # 全局公用组件，里面封装了很多好用的组件
│   ├── directive              # 全局指令
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由(存放了每个具体的网址要调整到那个组件)
│   ├── store                  # 全局 store管理(可以理解为当前页面的缓存)
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── .editorconfig              # vscode编辑器配置
├── .env.development           # 环境变量配置(开发环境)这里面放了后端接口地址的变量
├── .env.production            # 环境变量配置(生产环境)这里面放了后端接口地址的变量
├── .eslintrc.js               # eslint 配置项，用于配置整个项目的代码规范
├── .babel.config.js           # babel-loader 配置将ES6+的代码转换为向后兼容的JavaScript版本，以便在旧版浏览器或环境中运行
├── .jest.config.js            # 用于配置Jest测试框架的行为。Jest是一个流行的JavaScript测试框架，它可以帮助你编写和运行测试用例，并生成测试覆盖率报告
├── vue.config.js              # vue-cli 配置,在Vue项目中，vue.config.js通常位于项目根目录下，通过该文件可以配置项目的构建和开发环境
├── postcss.config.js          # postcss 配置,用于配置PostCSS插件。PostCSS是一个用JavaScript编写的工具，它可以将CSS转换为其他格式，如SASS、LESS等
└── package.json               # package.json,它描述了项目所需的各种模块以及项目的配置信息，如名称、版本、许可证等元数据。它是一个项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。