项目规范
项目目录介绍
[========]
├── .github # 自动化 ci 配置(可删除) ├── .vscode # vscode 配置 ├── mock # 本地 mock 数据 ├── node_modules # 项目依赖模块 ├── public │ ├── static # 静态资源 │ ├── favicon.ico # favicon │ ├── favicon_backup.ico # 备份favicon │ └── index.html # 入口 HTML ├── src │ ├── api # API 服务模块 │ ├── assets # 本地静态资源 │ ├── config # 项目配置 │ │ ├── default # 默认配置 │ │ └── config.js # 自定义配置 │ ├── extra # 封装的小工具 │ ├── i18n # 多语言 │ ├── icon # 存放自定义svg图标 ，仅在icon属性为isCustomSvg时才会调用svg图标，如无必要建议使用内置图标 │ ├── router # 路由配置 │ ├── store # vuex 状态管理配置 │ ├── utils # js 工具 │ ├── vab # 核心模块 │ │ |── components # 所有vab组件 | | | ├── VabAppMain # 内页 | | | ├── VabAvatar # 头像 | | | ├── VabBreadcrumb # 面包屑 | | | ├── VabFold # 展开合并 | | | ├── VabFullScreen # 全屏 | | | ├── VabLanguage # 国际化 | | | ├── VabLogo # logo | | | ├── VabNav # 顶部navBar | | | ├── VabNotice # 通知 | | | ├── VabRefresh # 刷新 | | | ├── VabSearch # 搜索 | | | ├── VabSideBar # 左侧菜单 | | | ├── VabTabs # 多标签页 | | | ├── VabTheme # 主题 | | | ├── VabTopBar # 横向布局头部 | | | ├── VabLink # 链接跳转封装 | | | ├── VabMenu # 菜单封装 │ │ | └── VabQueryForm # 顶部查询条件布局封装 │ │ ├── layouts # 界面布局(不需要主题可删除) | | | ├── VabLayoutColumn # 分栏布局 | | | ├── VabLayoutCommon # 常规布局 | | | ├── VabLayoutComprehensive # 综合布局 | | | ├── VabLayoutHorizontal # 横向布局 | | | └── VabLayoutVertical # 纵向布局 │ │ ├── pulgin # vab必要插件 │ │ └── styles # vab主题相关 │ ├── views # 页面组件 │ │ ├── callback # 第三方登录回调页面 │ │ ├── index # 首页 │ │ ├── login # 登录 │ │ ├── mall # 物料市场 │ │ ├── setting # 配置 │ │ ├── register # 注册 │ │ └── vab # 组件页 │ ├── App.vue # 应用入口组件 │ └── main.js # 应用入口js ├── .eslintrc.js # eslint 配置项 ├── babel.config.js # babel-loader 配置 ├── package.json # package.json ├── postcss.config.js # postcss 配置 ├── prettier.config.js # prettier 配置 ├── vab.config.js # vab 配置 └── vue.config.js # vue-cli 配置
vue/cli 配置
位置：src/config/default/cli.config.js
/**
* @description 导出vue/cli配置
*/
module.exports = {
//开发以及部署时的URL，hash模式时在不确定二级目录名称的情况下建议使用""代表相对路径或者"/二级目录/"，history模式默认使用"/"或者"/二级目录/"
publicPath: "",
//生产环境构建文件的目录名
outputDir: "dist",
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: "static",
//开发环境每次保存时是否输出为eslint编译警告
lintOnSave: true,
//进行编译的依赖
transpileDependencies: ["vue-echarts", "resize-detector"],
//开发环境端口号
devPort: "9999",
//需要自动注入并加载的模块
providePlugin: {},
//npm run build时是否自动生成7z压缩包
build7z: false,
};网络配置
位置：src/config/default/net.config.js
/**
* @description 导出网络配置
**/
module.exports = {
//默认的接口地址 如果是开发环境和生产环境走vab-mock-server，当然你也可以选择自己配置成需要的接口地址
baseURL:
process.env.NODE_ENV === "development" ? "mock-server" : "mock-server",
//配后端数据的接收方式application/json;charset=UTF-8 或 application/x-www-form-urlencoded;charset=UTF-8
contentType: "application/json;charset=UTF-8",
//最长请求时间
requestTimeout: 10000,
//操作正常code，支持String、Array、int多种类型
successCode: [200, 0, "200", "0"],
//数据状态的字段名称
statusName: "code",
//状态信息的字段名称
messageName: "msg",
};路由配置项
语法与 vue-router 语法一致，具体详见src/router/index.js
{
"hidden": true, //是否显示在菜单中显示隐藏路由（默认值：false）
"menuHidden": false, //是否显示在菜单中显示隐藏一级路由（默认值：false，除分栏布局有效）
"alwaysShow": true, //当只有一级子路由时是否显示父路由是否显示在菜单中显示路由（默认值：false）
"name": "Demo", //首字母大写，一定要与vue文件的name对应起来，用于noKeepAlive缓存控制（该项特别重要）
"meta": {
"title": "title", //菜单、面包屑、多标签页显示的名称
"roles": ["admin", "..."], //当config/settings.js中rolesControl配置开启时，用于控制角色（简写）
"roles": {
//当config/settings.js中rolesControl配置开启时，用于控制角色（全写）
"role": ["admin", "..."],
"ability": ["READ", "WRITE", "DELETE"], //ability: ["READ","WRITE"],
"mode": "allOf" //allOf: 数组内所有角色都拥有，返回True oneOf: 数组内拥有任一角色，返回True(等价第1种数据) except: 不拥有数组内任一角色，返回True(取反)
},
"remixIcon": "", //旧版remix图标
"icon": "", //新版
"isCustomSvgIcon": false, //旧版，是否是自定义svg图标（默认值：false，如果设置true，那么需要把你的svg拷贝到icon/remixIcon下，然后remixIcon字段配置上你的图标名）
"isCustomSvg": false, //新版，是否是自定义svg图标（默认值：false，如果设置true，那么需要把你的svg拷贝到icon/remixIcon下，然后remixIcon字段配置上你的图标名）
"noKeepAlive": true, //当前路由是否不缓存（默认值：false）
"affix": true, //当前路由是否固定多标签页（旧版）
"noCLosable": true, //当前路由是否可关闭多标签页，同上（新版）
"badge": "New", //badge小标签（只支持子级）
"tabHidden": true, //当前路由是否不显示多标签页
"activeMenu": "", //高亮指定菜单
"dot": false, //小圆点
"dynamicNewTab": false // 动态传参路由是否新开标签页
},
"children": []
}样式
scoped
强烈建议使用 scoped ，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
通过深度选择器自定义子组件样式
该方法同样适用于局部某个组件自定义 element-ui 样式
<style lang="scss" scoped>
::v-deep {
.el-menu--collapse {
border-right: 0 !important;
.el-submenu__icon-arrow {
right: 10px;
margin-top: -3px;
}
.el-submenu__title {
span {
display: none;
}
}
}
}
</style>
对于常见的布局样式或者公共的一些样式，列如常见的flex 布局之类的，建议在公共样式文件中定义一个class 类， 后期需要的样式直接添加class 减少重复代码。
后端接口联调，必看！！！
方案 1：直接连接方案（记得后端配置跨域）方案 1：直接连接方案（记得后端配置跨域）
修改位置src/config/net.config.js
/**
* @description 导出网络配置
**/
module.exports = {
// 默认的接口地址，开发环境和生产环境都会走/vab-mock-server
// 正式项目可以选择自己配置成需要的接口地址，如"https://api.xxx.com"
// 问号后边代表开发环境，冒号后边代表生产环境
baseURL:
process.env.NODE_ENV === "development"
? "/vab-mock-server"
: "/vab-mock-server",
};方案 2：代理连接方案（不推荐方案）
打开 vue.config.js 放开注释，就可以了（记住了，其他的啥都不用改，不用改动 settings.js 的 baseURL，框架会自动将 vab-mock-server 后缀代理到你的后台地址，此方式仅在开发环境临时解决跨域，建议直接后端配置，一劳永逸）
proxy: {
[baseURL]: {
target: `http://你的后端接口地址`,//所有配置不要动，只改这一个地方，改完重启项目
ws: true,
changeOrigin: true,
pathRewrite: {
["^/" + baseURL]: "",
},
},
},开发、打包注意事项！！！
node 版本与包管理工具
node 版本请安装官网最新正式版 14，node 版本小于 12 无法运行此项目
包管理工具建议使用 cnpm 或 pnpm，使用 npm 或 yarn 安装可能导致图片压缩依赖无法正常安装
布局与主题冗余会导致项目体积较大，访问速度变慢，故建议您选定一种布局或主题后删除其余不需要的布局和主题代码，加快网站访问速度
打包时建议注释掉的功能
主要介绍下，常需要注意的一些地方，主要集中在src目录下
文件夹命名统一采用驼峰式命名始终是单词大写开头 (PascalCase),js文件,vue 文件 变量名采用小驼峰 path:’/pascalCase”，避免定义无效变量，常量命名要大写 const MAX_DECRYPT_BLOCK = 128
1：（view，api) 下页面文件夹命名：
为了方便维护，view下新建文件夹名称要与 api 下接口文件夹名称一致，文件夹命名主要以功能模块代表命名，
view 下文件夹的单个vue页面，不要写太多代码，禁止在 src/components 目录下放置业务私有组件，业务私有组件应该在业务相关文件夹下建立components目录存放。
2：vue 单页面中设置名称 name 与文件夹名称路由名称一致。
主要是命名规则的介绍
1.新建页面
2：添加路由
3：新建页面的api
4:新建store
5:配置信息
项目所有的配置信息文件在 src/config 目录下
经常修改的 请求后台baseuRL 配置如下
第一个是开发环境下的，第二个是线上的baseUrl
开发时，跳过登录验证。
项目文件夹下vue.config.js 开发环境时跨域可配置代理（不推荐），建议后台配置跨域，
打包
1：config/net.config.js 设置好baseUrl 2:注释main.js 中的mock 3:image-webpack-loader 报错 cnpm i image-webpack-loader -D 4:项目根目录.env 文件填入您购买时绑定的用户名 5:项目根目录新建.env.local 配置下您购买时根据您用户名发放的 key，注意是新建，不是把.env 复制一份改动！！！！
打包时可能遇到的常见错误
打包报错 Cannot find module 'gifsicle' 方案 1：请使用使用 cnpm 安装，一定 cnpm 安装
项目根目录
cnpm i image-webpack-loader -D方案 2：去src/config/cli.config.js关闭图片压缩
module.exports = {
// npm run build时是否开启图片压缩，由于国内网路原因image-webpack-loader必须使用cnpm安装，如无法使用cnpm，请配置false
imageCompression: true,
};打包提示未配置秘钥 打包提示秘钥失效请填写秘钥到 env.local 中
常见问题
vendor 过大问题
建议使用 gzip，使用之后体积会只有原先 1/3 左右，pro 默认已开启
url 去掉
第 1 步：设置src/config/cli.config.js下的配置publicPath不能为空 第 2 步：修改src/config/cli.config.js下的配置routerMode为history 第 3 步：需要后端配合
构建和发布
项目根目录
cnpm i
npm run serve
npm run build注释
公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
多重 if 判断语句
注释块必须以/**（至少两个星号）开头**/
单行注释使用//其他
1：调试信息 console.log() debugger 使用完及时删除 2：除了三目运算，if,else 等禁止简写 3：判断相等时统一使用 === 而不是 ==； 4：后台返回的数据，接受后做必要的检验，数据是否合理，给出相应异常弹出框提示信息。 5：统一使用es6语法，let const … Array.form() 箭头函数 等等， 6:DOM 元素的 隐藏显示 使用 v-if v-show 而不是 通过 :class=”{}” 生成不同的类名 定义 display:none， 7:对element ui 组件进行二次封装时合理使用 $attrs $listeners 8:this.$nextclick(()=>{}) 正确使用 9:写代码时，尽可能的精简代码，能封装的就尽量抽离出来。 10:减少代码内设置行内样式，尽量定义语义化的class 11：页面中没有使用到的变量，方法等。上传svn前及时删除。