# 视图管理 **Repository Path**: rainbow-under-the-sunshine/vue_backstage ## Basic Information - **Project Name**: 视图管理 - **Description**: 用到的组件及插件 1. Vue 2. Vue-Router 3. 路由守卫 4. element-ui 5. less 6. less-loader 7. echarts 8. 阿里的 iconfont - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-12-11 - **Last Updated**: 2024-02-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: Echarts, Less, Vue ## README # vue_backstage 演示链接： https://rainbow-under-the-sunshine.gitee.io/visualization/#/login ## 1 文件结构 ``` ├── node_modules ├── public │ ├── favicon.ico 页签图标 │ └── index.html 主页面 ├── src │ ├── assets 存放静态资源 │ │ └── css 公共样式 | | └── images 静态图片 | | └── introduce_images 展示图片 | | └── logo.png 登录图标 | | │ │── components 存放组件 | | └──elements 存放共有组件 | | └──DealWith.vue 商品管理里面组件共有的右侧信息 │ │ └── CloThing.vue 商品管理里面组件中 服装组件 | | └── ConTents.vue 首页组件信息 | | └── ElectRonics.vue 商品管理里面组件中 电子产品组件 | | └── UserManagement.vue 用户信息组件内容 | | └── VsualizaTion.vue 销售视图组件内容 | | │ │── plugins element.js 文件夹 | | └── element.js elmenet按需引入 | | │ │── router: 路由配置 | | └── index.js 路由配置文件 | |—— view | | └── HomePage.vue: 布局组件 | | └── Login.vue: 登录组件 | | └── WelCome.vue: 欢迎组件 | | | |—— App.vue 组件注册总文件 │ │── main.js 入口文件 | | ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 ├── package-lock.json：包版本控制文件 ``` --- ## 2 采用技术 1. Vue全家桶 2. element-ui 框架 3. less 4. less-loader 5. echarts 8. 图标：阿里的 iconfont > 本项目仅供学习参考 --- ## 3 截图 ### 1.登录 登录 ### 2.欢迎页面 欢迎页面 ### 3.首页 首页 ### 4.用户管理 用户管理 ### 5.商品销售 #### 数码 欢迎页面——数码 #### 服装 欢迎页面 ### 6.销售视图 销售视图 ## 4 运行步骤 ### 1. 安装依赖 ``` npm install ``` ### 2. 启动 ``` npm run serve ``` ### 3.压缩 打包 ``` npm run build ``` ### 4.检查 ``` npm run lint ```