# vueadmin **Repository Path**: sunyker/vueadmin ## Basic Information - **Project Name**: vueadmin - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-06-04 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 简介 监控管理平台 ## 前序准备 如果你是初学者，你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。 同时配套了系列教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目 - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) - [手摸手，带你用vue撸后台 系列五(v4.0新版本)](https://juejin.im/post/5c92ff94f265da6128275a85) - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) - [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806) - [手摸手，带你用合理的姿势使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc) ## 功能 有待开发。。。 ## 开发 ```bash # 克隆项目 git clone https://gitee.com/xa_nt/monitor-niccloud-web # 进入项目目录 cd monitor-niccloud-web # 安装依赖 npm install # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev ``` 浏览器访问 http://localhost:9527 ## 发布 ```bash # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod ``` ## 其它 ```bash # 预览发布环境效果 npm run preview # 预览发布环境效果 + 静态资源分析 npm run preview -- --report # 代码格式检查 npm run lint # 代码格式检查并自动修复 npm run lint -- --fix ``` 更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) ## 目录结构 > 基础目录 ``` ├── .vscode # 项目代码片段 ├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json ``` > 页面目录(待完善) ``` ├── views # views 所有页面 │ ├── dashboard # 首页 │ ├── error-log # 日志异常 │ ├── error-page # 错误页面 │ ├── example # 示例页面 │ ├── guide # 引导页面 │ ├── icons # icons页面 │ ├── login # 登录页面 │ ├── profile # 个人中心页面 │ ├── redirect # 路由重定向 │ ├── ... ``` ## 优化项 - [x] 去国际化 - [x] 去Host检查 - [x] settings.js相关配置中文化、新增Logo文字配置 - [x] 全局滚动条美化（webkit内核生效） - [x] 封装基础模板（全局注册） - [ ] 项目代码片段（待完善，目前只完成了vue页面注释指令） ## vue-element-admin [在线 Demo](https://gitee.com/panjiachen/vue-element-admin.git) ## 高频问题 [解决方案](https://juejin.im/post/59fa9257f265da43062a1b0e)