基于vue全家桶开发的后台管理平台源码.zip

# IBOX后台管理平台 ## 一.项目简介 1.项目名称：IBOX后台管理平台 2.项目技术栈：Vue全家桶+TS+ElementUI 3.开发人员: 李鑫鑫 陈善军 周伟聪 张丽芬 4.项目实现功能，详情见下 ## 二.初始化项目创建 #### 1.配置环境并创建项目 1.1 创建项目： `vue create IboxApp `,选择项目配置模板，  1.2 选择项目配置选项 勾选所需要的模块  1.3 选择使用vue3.x版本开发  1.4 然后大家一路回车即可 1.5 cd到文件夹目录 1.6 `npm run serve`启动项目 #### 2.项目初始化 2.1 删除views,components,assets文件目录下的默认文件  2.2 在views下面创建对应个人员进行的模块页面文件（命名方式为大驼峰方式，类似于`MyHome`这种的命名方式。否则会报错。） 2.3 配置在router下面的index.ts中配置相对应的路由，（希望大家不要忘记怎么配置路由了） #### 3.修改默认样式 > 3.1 配置 css 主文件入口 方便后期进行样式的设置，在根路径下新建 vue.config.js 来进行webpack的配置，3.0项目中自带，设置css住入口文件配置在vue.config.js中设置 > > ```js > const { defineConfig } = require('@vue/cli-service') > module.exports = defineConfig({ > transpileDependencies: true, > // css相关配置 > css: { > // css预设器配置项 > loaderOptions: { > scss: { > additionalData: `@import "./src/styles/style.scss";`//主入口css文件路径 > } > } > } > }) > > ``` > > 3.2 新建 styles 文件夹 并新建 main.scss 主样式文件 并且写入初始化样式 > > ```css > html, > body, > div, > span, > applet, > object, > iframe, > h1, > h2, > h3, > h4, > h5, > h6, > p, > blockquote, > pre, > a, > abbr, > acronym, > address, > big, > cite, > code, > del, > dfn, > em, > img, > ins, > kbd, > q, > s, > samp, > small, > strike, > strong, > sub, > sup, > tt, > var, > b, > u, > i, > center, > dl, > dt, > dd, > ol, > ul, > fieldset, > form, > label, > legend, > table, > caption, > tbody, > tfoot, > thead, > tr, > th, > td, > article, > aside, > canvas, > details, > embed, > figure, > figcaption, > footer, > header, > hgroup, > menu, > nav, > output, > ruby, > section, > summary, > time, > mark, > audio, > video { > margin: 0; > padding: 0; > font-size: 100%; > font: inherit; > vertical-align: baseline; > } > > article, > aside, > details, > figcaption, > figure, > footer, > header, > hgroup, > menu, > nav, > section { > display: block; > } > > html { > line-height: 1.15; > -webkit-text-size-adjust: 100%; > } > > body { > margin: 0; > background-color: #f7f7f7; > font-family: 'Microsoft YaHei'; > font-size: 15px; > } > > main { > display: block; > } > > a { > background-color: transparent; > text-decoration: none; > } > > img { > display: block; > border-style: none; > } > > ul, > li { > list-style: none; > } > ``` > > 3. 3 引入到主样式文件中 在style.scss文件中编写 > > ```css > @import "./main.scss" > ``` #### 4.使用Element Plus搭建组件和布局 官网：https://element-plus.gitee.io/zh-CN/#/zh-CN/component/installation 4.1 安装 `npm i element-plus --save`或者 `cnpm i element-plus --save ` 4.2 按需引入 先下载插件 `npm install -D unplugin-vue-components unplugin-auto-import` 然后进行配置 ```js // 在vue.config.js中配置 const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = defineConfig({ transpileDependencies: true, // 设置插件配置 configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ] } }) ```  ## 三.关于项目功能实现以及开发人员分配 #### 1.项目主要实现功能 - **主界面的搭建和一些基础的功能开发--------张丽芬** - 使用Element Plus 进行布局 - 左侧菜单栏的相关配置（使用vuex进行简单的数据管理） - 定义基本的路由并初始化页面 - **菜单路由切换以及面包屑和登录的相关逻辑开发-----陈善军** - 实现使用axios数据的请求封装 - 使用本地存储或者cookie来存储用户的登录信息 - 设置路由导航守卫进行登录权限的校验 - 至于注册相关逻辑，看时间和能力，自行补充即可 - **首页数据统计，数据可视化页面，以及管理员的相关逻辑开发----李鑫鑫** - 对管理员列表的增删改查 - 系统首页数据统计和左侧菜单栏的权限校验 - 页面权限和按钮权限 - **轮播图的管理逻辑和商品的管理逻辑开发--------周伟聪** - 轮播图的页面渲染以及对轮播图的删除和修改 - 产品列表的相关增删改查 #### 2.功能拓展 这个看后面时间是否充足，在考虑去增添新的功能之类的， 以上就是本次自主项目的后台部分，关于接口文档，请小伙伴们不要着急，这两天加班加紧搞，大家加油， 祝大家早日实现月薪过万！！！ ​