(window.webpackJsonp=window.webpackJsonp||[]).push([[86],{407:function(t,s,a){"use strict";a.r(s);var e=a(17),r=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"基础教程"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#基础教程"}},[t._v("#")]),t._v(" 基础教程")]),t._v(" "),s("h2",{attrs:{id:"工程目录结构"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#工程目录结构"}},[t._v("#")]),t._v(" 工程目录结构")]),t._v(" "),s("p",[t._v("工程目录结构")]),t._v(" "),s("div",{staticClass:"language-sh extra-class"},[s("pre",{pre:!0,attrs:{class:"language-sh"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- yump-app-h5\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- .editorconfig       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 编辑器格式化配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- .env                "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# dev模式默认加载环境配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- .env.mock           "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# mock模式默认加载环境配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- .env.production     "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# prod模式默认加载环境配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- .env.report         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# report模式默认加载环境配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- .gitignore\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- .postcssrc.js       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# postcss配置文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- yump.config.js      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 多模块相关全局配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- README.md\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- babel.config.js     "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 语法兼容配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- jest.config.js      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# jest单元测试配置文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- package.json\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- vue.config.js       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 脚手架自定义配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- yarn.lock           "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 版本锁定文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- mocks               "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# mocks目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- config.js       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# api清单配置文件,要与api目录文件一一对应")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# mock服务入口文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- util.js         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# mock工具函数")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- api             "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# api的mock数据配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("       "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- login       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 按业务模块创建目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("       "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- login.json  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 具体业务接口挡板配置文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- public              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 公共资源,不打包")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- favicon.ico\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.html\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- images          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 外网广告图片,会经常变动的静态资源")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- template        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 多模块模板目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- src                 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 源码目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- modules         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 各模块入口")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- platfrom        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 跨平台能力桥接层")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- assets          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 静态资源目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- fonts       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 字体目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- icons       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 图标目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- img         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 图片目录,一般建议放小图")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- style       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 样式表目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- theme       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 主题样式目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- common          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 公共业务方法")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- vue-install.js  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 全局插件挂载入口方法")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- directive       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 自定义指令")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- filters         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 自定义过滤器")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- mixin           "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Vue混入")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- model           "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 实例化目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- params          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 业务数据字典目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- bsndef_action.js  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 菜单ID与路由映射配置表")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 业务数据字典")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- plugins         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 工程依赖插件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- axios.js    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# axios.js二次封装")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- utils           "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 工具类函数")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("       "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- components      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 业务公共组件目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- config\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 配置全局使用到的参数,如微服务名称")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- i18n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 国际化目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 国际化入口文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- config      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 国际化配置文件目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("       "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- en.js   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 英文配置文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("       "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- zhCN.js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 简体中文配置文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("       "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- zhTW.js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 繁体中文配置文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- plugins         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 引入第三方插件,待定")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- router          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 路由目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 路由入口函数")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- router.conf.js  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("#路由配置文件")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- store           "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 状态管理目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- i18n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 多语言目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- app.js      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 业务相关状态")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- index.js    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 入口函数")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- permission.js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 权限相关状态")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- session.js  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 会话相关状态")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- views           "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 业务页面开发目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("       "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- mbank\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("           "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- transfer "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 模块1业务开发目录")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("           "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("-- deposit  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 模块2业务开发目录")]),t._v("\n")])])]),s("h2",{attrs:{id:"配置文档"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置文档"}},[t._v("#")]),t._v(" 配置文档")]),t._v(" "),s("h3",{attrs:{id:"全局配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#全局配置"}},[t._v("#")]),t._v(" 全局配置")]),t._v(" "),s("p",[t._v("主要是指开发过程中的一些全局参数化配置，详见"),s("RouterLink",{attrs:{to:"/guide/#五、全局配置"}},[t._v("快速上手-全局配置")]),t._v("，")],1),t._v(" "),s("h3",{attrs:{id:"多环境配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#多环境配置"}},[t._v("#")]),t._v(" 多环境配置")]),t._v(" "),s("p",[t._v("项目默认支持配置多环境打包配置\n"),s("br")]),t._v(" "),s("p",[t._v("对应配置文件如下：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v(".env")]),t._v(" 本地开发环境")]),t._v(" "),s("li",[s("code",[t._v(".env.sit")]),t._v("SIT测试环境")]),t._v(" "),s("li",[s("code",[t._v(".env.uat")]),t._v("UAT测试环境")]),t._v(" "),s("li",[s("code",[t._v(".env.development")]),t._v(" 开发环境")]),t._v(" "),s("li",[s("code",[t._v(".env.production")]),t._v("生产环境")]),t._v(" "),s("li",[s("code",[t._v(".env.mock")]),t._v("mock环境")])]),t._v(" "),s("h3",{attrs:{id:"模块模板配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模块模板配置"}},[t._v("#")]),t._v(" 模块模板配置")]),t._v(" "),s("p",[s("code",[t._v("template")]),t._v("目录为"),s("code",[t._v("多模块")]),t._v("工程模板目录，以"),s("code",[t._v("template")]),t._v("目录为各模块，每个初始化好的模块，拥有模块入口文件目录-"),s("code",[t._v("src/modules/模块名")]),t._v("、router目录-"),s("code",[t._v("src/router/模块名")]),t._v("、vuex目录-"),s("code",[t._v("src/store/模块名")]),t._v("、业务代码开发目录-"),s("code",[t._v("src/views/模块名")]),t._v("，每个模块初始化完成之后可独立修改，也可通过修改"),s("code",[t._v("template")]),t._v("下模板页面后，执行更新命令批量更新各个模块，模板如下图：")]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/template.png"),width:"800px"}}),s("br")]),t._v(" "),s("h3",{attrs:{id:"路由配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#路由配置"}},[t._v("#")]),t._v(" 路由配置")]),t._v(" "),s("p",[s("code",[t._v("src/router/模块名")]),t._v("目录为各模块路由配置目录，"),s("code",[t._v("src/router/模块名/route.conf.js")]),t._v("可定义各个模块的路由,"),s("code",[t._v("src/router/模块名/index.js")]),t._v("可定义各个模块公共路由，加载公共路由方法等。")]),t._v(" "),s("h3",{attrs:{id:"请求配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#请求配置"}},[t._v("#")]),t._v(" 请求配置")]),t._v(" "),s("p",[s("code",[t._v("src/config/api")]),t._v("为项目请求配置目录,"),s("code",[t._v("src/config/index.js")]),t._v("文件中统一配置并导出服务名，"),s("code",[t._v("src/config/模块名")]),t._v("可配置每个功能模块的API请求。")]),t._v(" "),s("h3",{attrs:{id:"vuex配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vuex配置"}},[t._v("#")]),t._v(" vuex配置")]),t._v(" "),s("p",[s("code",[t._v("src/vuex/模块名")]),t._v("目录为各模块vuex目录，每个模块中包含各"),s("code",[t._v("action.js")]),t._v(", "),s("code",[t._v("getter.js")]),t._v(", "),s("code",[t._v("mutations.js")]),t._v(", "),s("code",[t._v("state.js")]),t._v("等vuex基础配置文件。")]),t._v(" "),s("h2",{attrs:{id:"数据字典使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据字典使用"}},[t._v("#")]),t._v(" 数据字典使用")]),t._v(" "),s("ul",[s("li",[t._v("1."),s("code",[t._v("src/common/params/index.js")]),t._v("存放常用数据字典，数据字典定义后，全局统一注册"),s("code",[t._v("filter")]),t._v("可在模板上直接使用：")])]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/params1.jpg"),width:"800px"}}),s("br")]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/params2.jpg"),width:"800px"}}),s("br")]),t._v(" "),s("ul",[s("li",[s("ol",{attrs:{start:"2"}},[s("li",[s("code",[t._v("find")]),t._v("方法可查找数据字典，返回数据字典对象,调用方法如下：")])])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" bankType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$utils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'BANK_TYPE'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bankType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bankType'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("ol",{attrs:{start:"3"}},[s("li",[s("code",[t._v("convertKey")]),t._v("方法可根据"),s("code",[t._v("字典名称")]),t._v(", "),s("code",[t._v("key")]),t._v("返回对应"),s("code",[t._v("value")]),t._v(",调用方法如下：")])])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$utils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("convertKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'BANK_TYPE'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'102'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("ol",{attrs:{start:"4"}},[s("li",[s("code",[t._v("convertValue")]),t._v("方法可根据"),s("code",[t._v("字典名称")]),t._v(", "),s("code",[t._v("value")]),t._v("返回对应"),s("code",[t._v("key")]),t._v(",调用方法如下：")])])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" key "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$utils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("convertValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'BANK_TYPE'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'中国工商银行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'keys'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"多语言使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#多语言使用"}},[t._v("#")]),t._v(" 多语言使用")]),t._v(" "),s("p",[s("code",[t._v("src/i18n")]),t._v("可对项目进行多语言配置，默认支持中文简体、英文、中文繁体。 实现步骤如下：")]),t._v(" "),s("ul",[s("li",[t._v("示例，代码地址；src/views/mbank/index/myIndex.vue")])]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/language1.jpg"),width:"400px"}}),s("br")]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/color2.jpg"),width:"400px"}}),s("br")]),t._v(" "),s("ul",[s("li",[t._v("1."),s("code",[t._v("common/mixin/index.js")]),t._v("多语言切换的公共方法('zhCN'-中文简体，'en'-英文)，"),s("code",[t._v("switchLanguage")]),t._v("为全局混入方法，可全局访问调用。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("switchLanguage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" language "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" localStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'locale'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zhCN'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 语言标识")]),t._v("\n          localStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'locale'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" language "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zhCN'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zhCN'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n          window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reload")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("2.获取当前语言的方法，调用方法如下：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" language "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" localStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'locale'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("3.设置要使用语言的方法，调用方法如下：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("localStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'locale'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"多主题配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#多主题配置"}},[t._v("#")]),t._v(" 多主题配置")]),t._v(" "),s("p",[s("code",[t._v("src/assets/style/theme.scss")]),t._v("可对项目进行多主题配置，默认支持蓝色主题、橙色主题，可根据项目的需求配置需要的主题。 脚手架中实现多主题示例, 实现效果及步骤步骤如下，如需定制化其他主题可参考此案例。")]),t._v(" "),s("ul",[s("li",[t._v("示例效果如下图，代码地址；src/views/mbank/index/myIndex.vue")])]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/color1.jpg"),width:"400px"}}),s("br")]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/color2.jpg"),width:"400px"}}),s("br")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("实现步骤")])]),t._v(" "),s("li",[s("p",[t._v("1.初始化模块的主题配置")])])]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/color_theme.jpg"),width:"800px"}}),s("br")]),t._v(" "),s("ul",[s("li",[t._v("2."),s("code",[t._v("common/mixin/index.js")]),t._v("多主题切换的公共方法('blue'-蓝色主题，'orange'-橙色主题), "),s("code",[t._v("switchThemeColor")]),t._v("为混入方法，可在全局访问调用。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("switchThemeColor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" colorType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" localStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__color_theme__'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    colorType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" colorType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'orange'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),t._v("\n    document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("documentElement"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttribute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color-theme'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" colorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    localStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__color_theme__'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" colorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("3.获取当前主题的方法，调用方法如下：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" colorType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" localStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__color_theme__'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[t._v("4.设置要使用主题的方法，调用方法如下：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("documentElement"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttribute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color-theme'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" colorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nlocalStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__color_theme__'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" colorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[t._v("5.在"),s("code",[t._v("src\\assets\\style\\theme.scss")]),t._v("配置多主题样式('blue'-蓝色主题，'orange'-橙色主题),并增加自定义主题的相关样式代码。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("font"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("theme "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("theme"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"blue"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" #205d96"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("theme"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"orange"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgb")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("245")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("90")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("59")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"权限配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#权限配置"}},[t._v("#")]),t._v(" 权限配置")]),t._v(" "),s("p",[t._v("不同的用户有着不同的按钮权限控制，为了满足这个需求，做了权限配置。")]),t._v(" "),s("ul",[s("li",[t._v("1.获取当前用户所有按钮权限")])]),t._v(" "),s("p",[s("img",{attrs:{src:t.$withBase("/images/guide/permission.jpg"),width:"800px"}}),s("br")]),t._v(" "),s("ul",[s("li",[t._v("2."),s("code",[t._v("common/mixin/index.js")]),t._v("获取按钮权限的公共方法")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasPermission")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("permission")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" myBtns "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAPDataStorage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("key")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'set_btns_permission'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("  \n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("isRuntime")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("encrypt")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1'")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        myBtns "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("permissionList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当前用户所有按钮权限数组")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" myBtns"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("permission"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("ul",[s("li",[t._v("3.获取按钮权限公共方法的使用")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasPermission")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("permissionId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//permissionId当前按钮的权限ID")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n")])])]),s("h2",{attrs:{id:"工具方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#工具方法"}},[t._v("#")]),t._v(" 工具方法")]),t._v(" "),s("p",[s("code",[t._v("src/common/utils/index.js")]),t._v("方法工具库中，内置几十种常见工具方法，例如常见的"),s("code",[t._v("时间格式化")]),t._v("方法，"),s("code",[t._v("用户信息脱敏")]),t._v("方法，"),s("code",[t._v("手机号校验")]),t._v("、"),s("code",[t._v("邮箱校验")]),t._v("、"),s("code",[t._v("金额格式化")]),t._v("等方法。")]),t._v(" "),s("h2",{attrs:{id:"网络请求配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#网络请求配置"}},[t._v("#")]),t._v(" 网络请求配置")]),t._v(" "),s("p",[t._v("使用"),s("code",[t._v("$app.request方法")]),t._v("发起网络请求")]),t._v(" "),s("ul",[s("li",[t._v("1.环境配置文件中配置是否使用外壳的接口请求服务")])]),t._v(" "),s("p",[t._v("在环境配置文件中可以配置是否使用外壳的接口请求服务，以开发环境配置文件"),s("code",[t._v("工程路径/.env.development")]),t._v("为例，"),s("code",[t._v("VUE_APP_HAS_USE_YUSDK_REQUEST")]),t._v("字段配置当前是否使用外壳的接口请求服务。如图所示：")]),t._v(" "),s("img",{attrs:{src:t.$withBase("/images/guide/env_development_7.jpg"),alt:"env_development_7",width:"800px"}}),t._v(" "),s("p",[t._v("当"),s("code",[t._v("VUE_APP_HAS_USE_YUSDK_REQUEST")]),t._v("字段配置为"),s("code",[t._v("true")]),t._v("时，在使用"),s("code",[t._v("$app.request方法")]),t._v("发起网络请求即是使用外壳的接口请求服务，配置为"),s("code",[t._v("false")]),t._v("时发起网络请求时走的是纯前端的请求。")]),t._v(" "),s("ul",[s("li",[t._v("2.添加拦截器")])]),t._v(" "),s("p",[t._v("拦截器分为请求拦截器和响应拦截器，在"),s("code",[t._v("src/common/plugins/request.js")]),t._v("文件中可以添加拦截器。")]),t._v(" "),s("img",{attrs:{src:t.$withBase("/images/guide/request_1.jpg"),alt:"env_development_7",width:"800px"}}),t._v(" "),s("p",[t._v("在请求拦截器中可以对发送请求前需要做些什么进行处理，也可以对请求错误进行处理。")]),t._v(" "),s("p",[t._v("在响应拦截器中可以对返回的响应数据进行处理，也可以对响应错误进行处理。")]),t._v(" "),s("h2",{attrs:{id:"mock使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mock使用"}},[t._v("#")]),t._v(" mock使用")]),t._v(" "),s("ul",[s("li",[t._v("1.mock数据相关配置")])]),t._v(" "),s("p",[t._v("VUE_APP_MOCK配置本地服务是否开启mock,本机调试时可开启；VUE_APP_MOCK_SERVE配置离线包是否打包mock，谨慎使用，会影响第三方库正常使用")]),t._v(" "),s("img",{attrs:{src:t.$withBase("/images/guide/env_development_4.png"),alt:"env_development_4",width:"800px"}}),t._v(" "),s("ul",[s("li",[t._v("2.使用详情")])]),t._v(" "),s("img",{attrs:{src:t.$withBase("/images/guide/mock-01.png"),alt:"mock-01",width:"800px"}}),t._v(" "),s("img",{attrs:{src:t.$withBase("/images/guide/mock-03.png"),alt:"mock-02",width:"800px"}}),t._v(" "),s("img",{attrs:{src:t.$withBase("/images/guide/mock-03.png"),alt:"mock-03",width:"800px"}})])}),[],!1,null,null,null);s.default=r.exports}}]);