分享一个基于 Vue.js 和 ant-design-vue 的中后台前端脚手架_百度知 ...
发布网友
发布时间：2024-09-07 08:10
共1个回答
热心网友
时间：2024-10-29 20:52
篇幅较长，建议先收藏，如觉有帮助，请给予Star支持，感谢~ 中后台前端脚手架GitHub地址
基于Vue.js 2.x和ant-design-vue组件库，此脚手架提供风格统一、快速构建中后台系统的前端解决方案。
脚手架约定了环境变量配置，用于切换和支持各功能，具体变量作用如下：
BASE_URL：路由地址前缀，一般无需修改，效果同vue.config.js中的publicPath。
VUE_APP_API_PREFIX：请求接口URL前缀，根据后端开发提供的进行修改。
VUE_APP_LS_PREFIX：脚手架内置vue-ls库操作storage，此变量为namespace字段配置。
VUE_APP_PRIVATE：是否属于私有云部署，部署到内网，减少无谓的CDN资源加载。
VUE_APP_USE_MOCKER：内置mocker-api和mockjs2两个mock服务，true表示使用mocker-api。
VUE_APP_BUILD_ENV：打包环境，区分不同生产环境。
VUE_APP_THEME_COLOR：主题色，默认跟随ant-design-vue的主题色。
VUE_APP_BUILD_REPORT：是否开启打包分析，发现dist资源文件大时，设置为true。
除了以上环境变量，脚手架还基于vue-cli提供vue.config.js配置能力，封装了对打包优化、主题配置和接口代理配置功能。
打包优化：将VUE_APP_PRIVATE设置为false，自动忽略常用第三方库使用CDN加载，减小打包后的资源大小，提高打包速度。
主题配置：config/theme.config.js封装了自定义主题色功能，配合VUE_APP_THEME_COLOR变量使用。
接口代理配置：config/theme.config.js的proxy字段配置接口请求地址。
项目启动后，右侧会始终有一个「定制」按钮，可设置菜单风格、主题色、导航模式，同步修改src/store/modules/app.js。
正式环境打包上线后，此「定制」入口会自动隐藏。
完整的请求配置项如下：
使用示例：
使用mock服务：
在mock/modules新增select.js并定义mock数据：
然后在mock/index.js中引入：
然后在src/api/select.js中定义调用接口的方法：
最后在需要使用该请求的页面导入使用。
在template中使用：
在JS中使用：
路由和菜单：路由分为静态和动态两种，静态路由完全由前端负责，动态路由由后端接口返回菜单列表，前端根据约定规则解析并生成最终路由。
权限：脚手架支持按钮级别权限控制，只需要在当前登录的用户信息中返回对应的权限点。
样式：脚手架内置样式库。样式库使用文档。
脚手架也将ant-design-vue的主题变量添加到全局，可以在任意的less中使用其中的变量。
使用模板库：脚手架开发了一套配套的模板库，方便创建各种组件和页面，提高开发效率。
发布：脚手架内置生产环境、测试环境、演示环境和预览环境，命令配置好，可直接执行打包。
部署：将打包的dist静态资源复制到对应后端服务器的静态资源目录。
使用wy app部署：
全局安装：
执行wy init project-name安装脚手架，在列表中选择后台脚手架。
脚手架常用命令：
代码和文档：
篇幅较长，感谢阅读，脚手架以后会长期维护，欢迎下载使用：中后台前端脚手架GitHub地址
脚手架使用文档也会保持同步更新。
