项目规范
<h3>项目目录介绍</h3>
<p>[========]</p>
<p>├── .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 配置</p>
<h3>vue/cli 配置</h3>
<p>位置:src/config/default/cli.config.js</p>
<pre><code class="language-javascript">/**
* @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,
};</code></pre>
<h3>网络配置</h3>
<p>位置:src/config/default/net.config.js</p>
<pre><code class="language-javascript">/**
* @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",
};</code></pre>
<h3>路由配置项</h3>
<p>语法与 vue-router 语法一致,具体详见src/router/index.js</p>
<pre><code class="language-markdown">{
"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": []
}</code></pre>
<h3>样式</h3>
<h6>scoped</h6>
<p>强烈建议使用 scoped ,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。</p>
<h4>通过深度选择器自定义子组件样式</h4>
<p>该方法同样适用于局部某个组件自定义 element-ui 样式</p>
<pre><code class="language-markdown"><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>
</code></pre>
<p>对于常见的布局样式或者公共的一些样式,列如常见的flex 布局之类的,建议在公共样式文件中定义一个class 类, 后期需要的样式直接添加class 减少重复代码。
<img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/183ec0c79e11b99f56b22b95627fd834" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/3119d52a79d0133abbd60ea33e2a983f" alt="" /></p>
<h3>后端接口联调,必看!!!</h3>
<h6>方案 1:直接连接方案(记得后端配置跨域)方案 1:直接连接方案(记得后端配置跨域)</h6>
<p>修改位置src/config/net.config.js</p>
<pre><code class="language-javascript">/**
* @description 导出网络配置
**/
module.exports = {
// 默认的接口地址,开发环境和生产环境都会走/vab-mock-server
// 正式项目可以选择自己配置成需要的接口地址,如"https://api.xxx.com"
// 问号后边代表开发环境,冒号后边代表生产环境
baseURL:
process.env.NODE_ENV === "development"
? "/vab-mock-server"
: "/vab-mock-server",
};</code></pre>
<h6>方案 2:代理连接方案(不推荐方案)</h6>
<p>打开 vue.config.js 放开注释,就可以了(记住了,其他的啥都不用改,不用改动 settings.js 的 baseURL,框架会自动将 vab-mock-server 后缀代理到你的后台地址,此方式仅在开发环境临时解决跨域,建议直接后端配置,一劳永逸)</p>
<pre><code class="language-javascript">proxy: {
[baseURL]: {
target: `http://你的后端接口地址`,//所有配置不要动,只改这一个地方,改完重启项目
ws: true,
changeOrigin: true,
pathRewrite: {
["^/" + baseURL]: "",
},
},
},</code></pre>
<h3>开发、打包注意事项!!!</h3>
<p>node 版本与包管理工具
node 版本请安装官网最新正式版 14,node 版本小于 12 无法运行此项目
包管理工具建议使用 cnpm 或 pnpm,使用 npm 或 yarn 安装可能导致图片压缩依赖无法正常安装
布局与主题冗余会导致项目体积较大,访问速度变慢,故建议您选定一种布局或主题后删除其余不需要的布局和主题代码,加快网站访问速度
打包时建议注释掉的功能
<img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/6d0453b3856b2a69da907153c997fabd" alt="" /></p>
<h3>主要介绍下,常需要注意的一些地方,主要集中在src目录下</h3>
<p>文件夹命名统一采用驼峰式命名始终是单词大写开头 (PascalCase),js文件,vue 文件 变量名采用小驼峰 path:’/pascalCase”,避免定义无效变量,常量命名要大写 const MAX_DECRYPT_BLOCK = 128
1:(view,api) 下页面文件夹命名:
为了方便维护,view下新建文件夹名称要与 api 下接口文件夹名称一致,文件夹命名主要以功能模块代表命名,
view 下文件夹的单个vue页面,不要写太多代码,禁止在 src/components 目录下放置业务私有组件,业务私有组件应该在业务相关文件夹下建立components目录存放。
2:vue 单页面中设置名称 name 与文件夹名称路由名称一致。
主要是命名规则的介绍
<img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/441be2ce17845da5ca5325dfc3113764" alt="" /></p>
<h6>1.新建页面</h6>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/a0d4984607fa5abad9cdac6298f73446" alt="" /></p>
<h6>2:添加路由</h6>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/2aa14e86ab31881caec6766c4e486b1f" alt="" /></p>
<h6>3:新建页面的api</h6>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/84ee364bc4c3826081af54bb46814192" alt="" /></p>
<h6>4:新建store</h6>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/6d821ccf788f89596b7c4d61a7dbc731" alt="" /></p>
<h6>5:配置信息</h6>
<p>项目所有的配置信息文件在 src/config 目录下
经常修改的 请求后台baseuRL 配置如下
<img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/a9a8f4c74ff79beac1b842ba447a8b84" alt="" />
第一个是开发环境下的,第二个是线上的baseUrl</p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/ff9dac262a59fcad8d8a71186ce2edb8" alt="" />
开发时,跳过登录验证。
<img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/fb31908683ab86e18b2b741ab507a9fa" alt="" />
项目文件夹下vue.config.js 开发环境时跨域可配置代理(不推荐),建议后台配置跨域,</p>
<h3>打包</h3>
<p>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 复制一份改动!!!!</p>
<h3>打包时可能遇到的常见错误</h3>
<p>打包报错 Cannot find module 'gifsicle'
方案 1:请使用使用 cnpm 安装,一定 cnpm 安装</p>
<h1>项目根目录</h1>
<pre><code>cnpm i image-webpack-loader -D</code></pre>
<p>方案 2:去src/config/cli.config.js关闭图片压缩</p>
<pre><code class="language-markdown"> module.exports = {
// npm run build时是否开启图片压缩,由于国内网路原因image-webpack-loader必须使用cnpm安装,如无法使用cnpm,请配置false
imageCompression: true,
};</code></pre>
<p>打包提示未配置秘钥
打包提示秘钥失效请填写秘钥到 env.local 中</p>
<h1>常见问题</h1>
<h4>vendor 过大问题</h4>
<p>建议使用 gzip,使用之后体积会只有原先 1/3 左右,pro 默认已开启</p>
<h4>url 去掉</h4>
<p>第 1 步:设置src/config/cli.config.js下的配置publicPath不能为空
第 2 步:修改src/config/cli.config.js下的配置routerMode为history
第 3 步:需要后端配合</p>
<h3>构建和发布</h3>
<h6>项目根目录</h6>
<pre><code>cnpm i
npm run serve
npm run build</code></pre>
<h3>注释</h3>
<pre><code>公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
多重 if 判断语句
注释块必须以/**(至少两个星号)开头**/
单行注释使用//</code></pre>
<h3>其他</h3>
<p>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前及时删除。</p>