【源码】基于Vue.js框架的UI管理系统

项目简介

本项目是基于Vue.js框架构建的UI管理系统，运用了Vue的最佳实践，通过Vuex管理数据，使用Vue Router进行路由管理，致力于打造一个优雅、模块化且易于维护的前端应用。

项目的主要特性和功能

1. 模块化开发：采用模块化结构，各功能或页面为独立模块，便于开发与维护。
2. 数据管理：使用Vuex进行状态管理，保证数据一致性与可维护性。
3. 路由管理：借助Vue Router实现页面无缝切换。
4. 遵循最佳实践：遵循Vue的最佳实践，如通过props进行父子组件数据传递、使用事件进行交互。
5. 代码规范：采用推荐的命名、格式等规范，提升代码可读性与可维护性。
6. 国际化支持：运用i18n实现多语言环境下的应用部署。
7. 请求管理：使用axios管理后端请求，方便数据获取与提交。
8. 错误处理与反馈：具备完善的错误处理和用户反馈机制，提升用户体验。
9. 构建与优化：使用Webpack进行项目构建和优化，实现快速开发与部署。

安装使用步骤

安装依赖

若已下载项目源码文件，在项目根目录下，打开命令行工具，执行以下命令安装插件： bash yarn install

启动项目

安装完成后，执行以下命令启动项目： bash yarn serve

打包项目

若需要打包项目，执行以下命令： bash yarn build

分析打包体积

如需分析打包体积，可执行： bash yarn analyz

提交代码

提交代码时，运行： bash yarn push

其他常见操作及问题解决

1. 若yarn push不能用：在命令行工具中切到项目目录下，执行chmod 755 push.sh。
2. 手机调试或让他人查看：将手机和电脑连在同一网络环境（如同一WIFI），复制地址栏的地址发送给手机即可访问。
3. 开发移动端H5：
   • 切换到mobile_template分支：git checkout mobile_template。
   • 查看设计稿宽度，将其除以10后，修改package.json中postcss-px2rem下的remUnit。
4. 修改格式化空格：在.editorconfig中设置indent_size = 2。
5. 组件中引入图片：图片目录在src/assets下，引入方式如<img :src="reuqire('@/assets/img/demo.png')" alt="" />，建议动态引入。
6. 无视层级导入css或引入图片：使用~，如@import "~@/scss/_var.css"; 。
7. 修改Toast样式：修改src/components/toast/toast.vue文件。
8. 本地和服务端调试：修改vue.config.js中的proxy为服务端地址。
9. 引入第三方组件修改样式：可使用>>>或/deep/深度作用选择器，或单独写一个无scoped的style。
10. 解决移动端border太粗问题：使用@include border-bottom();等样式，详细配置可查看mobile_template分支下src/style/mixin.scss里的border类。
11. 前端日期展示处理：在<template>模版中使用| 过滤器，如{{1544179366 | timeFilter}}，自定义方法可在src/filters/index.js中添加。
12. 微信公众号分享问题：
    • vue-router用hash模式。
    • wx.config里的url动态获取并encode：encodeURIComponent(location.href.split('#')[0])。
    • wx.config放到页面mounted里。
13. 保持端口号不变：Mac电脑使用control + c关闭node服务。
14. 解决IOS上下滑动页面被拖动问题：在public文件夹下创建inobounce.min.js，并在index.html中添加<script src="./inobounce.min.js"></script>。
15. 解决IOS不能滚动问题：
    • 所有页面不能滚动，在最外层添加overflow-y:scroll; -webkit-overflow-scrolling:touch;。
    • 单个页面不能滚动，在本页面最外层添加height: 100vh; overflow-y:scroll; -webkit-overflow-scrolling:touch;。
16. 解决ios input获取焦点有延迟问题：在main.js中引入FastClick并修改focus()方法。
17. 打包不同环境代码包：在.env、.env.development、.env.production等文件中配置变量，分别使用yarn devbuild和yarn build打包开发和生产环境的包。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】